CKEditor 3.x WYSIWYG Editor 所見即所得編輯器安裝及設定

CKEditor

官網：http://ckeditor.com/
下載：http://ckeditor.com/download

安裝方式：

以Appserv為例，下載後解壓縮到x:\appserv\www\ 底下就行了
之後可以到 http://<你的網址>/ckeditor/_samples/index.html 看到各種官方案例就成功了

簡單實作：

以下例子都是做一個name為textarea01的有CKEditor 功能的文字區塊出來
環境於www根目錄，ckeditor資料夾也於根目錄上

基本版

[html title="於head內加入"]<script type="text/javascript" src="ckeditor/ckeditor.js"></script> [/html]
[xml title="於body內加入"]<script type="text/javascript"></span>
CKEDITOR.replace('textarea01');
</script>[/xml]

php版

[html title="於head內加入"]<?php require_once("ckeditor/ckeditor_php5.php")?>[/html]
[php title="於body內加入"]$CKEditor = new CKEditor();
$CKEditor->editor("textarea01");[/php]

jQuery版

[html title="於head內加入"]<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="ckeditor/adapters/jquery.js"></script>
<script type="text/javascript">
$(function()
{
$("textarea[name='textarea01']").ckeditor();
});
</script>[/html]
[html title="於body內加入"]<textarea name="textarea01">HelloWorld</textarea>[/html]

設定CKEditor預設值：

打開ckeditor/config.js
更詳細的官方說明：官方config.js文件

[javascript]
CKEDITOR.editorConfig = function( config )
{
config.toolbar = 'MyStyle';
//toolbar按鈕的配置，細節設定在下面的config.toolbar_MyStyle 還可以自製 Full Basic等類型需要時直接換
config.language = 'zh';
//設定成中文
config.uiColor = '#AADC6E';
//設定界面顏色
config.resize_enabled = false;
//設定成不能隨意拉大範圍
config.toolbar_MyStyle =
[
{ name: 'document', items : [ 'Source','-','NewPage','DocProps' ] },
{ name: 'clipboard', items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] },
{ name: 'editing', items : [ 'Find','Replace','-','SelectAll'] },
'/',
{ 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','SpecialChar','PageBreak' ] },
'/',
{ name: 'styles', items : [ 'Styles','Format','Font','FontSize' ] },
{ name: 'colors', items : [ 'TextColor','BGColor' ] },
{ name: 'tools', items : [ 'Maximize', 'ShowBlocks' ] }
];

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.toolbar_Basic =
[
['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink']
];
};
[/javascript]

 

幫CKEditor減肥：

• 如果你不是用php的話可以刪掉所有.php檔


• 反之也可以刪所有.asp檔


•  _samples資料夾


• _source資料夾


• skins內用不到的外表


• lang內用不到的語系

還有刪掉ckeditor根目錄下的

• CHANGES.html


• ckeditor.pack


• ckeditor_basic.js 、 ckeditor_basic_source.js和ckeditor_source.js   (如果你不loading他們)


• INSTALL.html