Archive

文章標籤 ‘FCKeditor’

CKeditor 自訂工具列及字型和預設大小設定

2013年7月26日 尚無評論

CKEDITOR 很多專案都有採用,不過似乎不太可能直接下載解開就直接採用

雖然常有工程師都是偷懶的直接全放上去,但其實對資安及友善度來說都是不建議的

像一般工具列,如按完整的版本上去,出現的畫面會如下:

看到了吧,這未免也太多功能按鈕了而且又沒有列的很好,有時想要一個自訂的工具列,如下圖

雖然他目前有提供基本、標準、完整、及客製,不過前三個大多都不是我個人慣用的工具列

而客製看來有點小複雜,因為不太清楚哪個功能是哪個plugin 所以試了試也就放棄,還是上網找找傳統在fckeditor的一些設定調整方式好了

(先前fckeditor 都會把相關參數設定放置fckconfig.js,要調整都非常方便,可是ckeditor config.js 現在變的太乾淨了…全都拿掉了)

可以參考http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Toolbar 這篇,就有提及如何調整工具列,所以可以參考該篇將

config.toolbar = 'Full';
 
config.toolbar_Full =
[
	{ name: 'document', items : [ 'Source','-','Save','NewPage','DocProps','Preview','Print','-','Templates' ] },
	{ name: 'clipboard', items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] },
	{ name: 'editing', items : [ 'Find','Replace','-','SelectAll','-','SpellChecker', 'Scayt' ] },
	{ name: 'forms', items : [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 
        'HiddenField' ] },
	'/',
	{ name: 'basicstyles', items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat' ] },
	{ name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','CreateDiv',
	'-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl' ] },
	{ name: 'links', items : [ 'Link','Unlink','Anchor' ] },
	{ name: 'insert', items : [ 'Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak','Iframe' ] },
	'/',
	{ name: 'styles', items : [ 'Styles','Format','Font','FontSize' ] },
	{ name: 'colors', items : [ 'TextColor','BGColor' ] },
	{ name: 'tools', items : [ 'Maximize', 'ShowBlocks','-','About' ] }
];

直接放入config.js  CKEDITOR.editorConfig = function( config ) { …} 之中即可,然後再依按鈕的順序調整一版是自己要的工具列即可,是不是比客製的還容易呢?

如果要在字型之中加上中文字型,可以參考 http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.font_names 這篇

一樣在其中加上你要的字型即可,以下範例是偷懶作法,用預設值直接加上中文字型 (記得config.js要轉換編碼為UTF8 不然看到會是亂碼

config.font_names = "新細明體;標楷體;微軟正黑體;" +config.font_names ;

最後如果編輯框想設定預設寬高的話,只要再加上:

config.height = 250; 
config.width = 600; 

這樣就可以調整成如你想要的編輯器了!!

當然還有很多參數要再調整,但這上述這幾個是最常用的,所以先寫下來介紹給大家!!

FCKeditor for PHP 注意事項

2008年11月7日 尚無評論

最近在PHP要使用FCKeditor ,整合起來比JAVA太方便了
首先 要先去下載FCKeditor 小弟用的是2.6.3版本

在使用時,要先載入他的函式庫

<script type=”text/javascript” src=”fckeditor/fckeditor.js”></script>

然後參考php 的sample02.php code 要使用時只要照下面的寫法即可

<?php
$oFCKeditor = new FCKeditor('FCKeditor1') ;
$oFCKeditor->BasePath = $sBasePath ;

$oFCKeditor->Config['AutoDetectLanguage'] = false;
$oFCKeditor->Config['DefaultLanguage']  = 'zh' ;  //繁體
$oFCKeditor->Value = '<p>This is some <strong>sample text</strong>.
' ;  //預設值
$oFCKeditor->Create() ;
?>

不過小弟不喜歡這種使用方式,他也有提供Javascript版本的,因為可以保留原本的textarea架構
以後要停用或抽換比較方便,所以小弟喜歡用這個方式來套用

<script>
var oFCKeditor;

window.onload = function()
{
var sBasePath = “fckeditor/”;
oFCKeditor = new FCKeditor( 'content', '100%', 300) ;
oFCKeditor.BasePath = sBasePath ;
oFCKeditor.ReplaceTextarea() ;
}

//–>
</script>

預設值就寫在原本的textarea 即可,所以自覺得更簡單方便囉!!

然後如果要採用他的圖片或檔案上傳功能,目前他對PHP也已經完全整合好了
所以使用超方便的,不像Java要另外找人寫的嵌入,要啟用上傳及瀏覽檔案功能
只要到 fckeditor\editor\filemanager\connectors\php\  找到config.php檔案
將檔案內以下幾個參數值調整即可的

//原本是false 就啟用改成 true 吧
$Config['Enabled'] = true ;

//設定你要上傳的目錄,注意如果是linux 平台該目錄要開放可讀寫的權限才可以
$Config['UserFilesPath'] = '/userupload/'

這樣就完成啦,這麼好用的功能只要簡單調整幾個動作就可以完成整合
真是不錯用!!

Categories: WebDesign Tags: ,

FCKeditor如何判斷空值

2008年5月27日 尚無評論

最近用到FCKeditor發現他無法像一般的方式進行空值的判斷
找了一下,才知他本身是有提供API 可以呼叫取得

這行就是取得ID內的值
FCKeditorAPI.GetInstance(ID).GetXHTML()

這行就是設定ID欄位的值
FCKeditorAPI.GetInstance(ID).SetHTML(“Default String”)

而ID就是我們使用FCKeditor的變數名稱
不知哪有詳細的API可以看
看來FCKeditor蠻強大的!!

Categories: 程式開發 Tags: