CKEditor 2014-02-10

2011年寫了一篇 CKEditor - 使用方式 ，那時版本是 3.6。現在新版改了很多。

目前版本：4.3.2

Plugin 比較表

直接看別人寫好的教學比較快：
[ASP.net MVC] ckeditor網頁編輯器 字型、圖片上傳功能的快速安裝筆記
CKEditor4 重要配置設定 config.js (中文)
CKeditor編輯器選項配置 (這篇有很多按鈕名稱)
CKEditor Samples » Toolbar Configuration

修改設定的地方
如果要讓 CKEditor 在所有地方出現的內容都一致，要修改 config.js。

CKEDITOR.editorConfig = function( config ) {
 config.toolbarGroups = [
  { name: 'clipboard',   groups: [ 'clipboard', 'undo' ] },
  '/',
  { name: 'editing',     groups: [ 'find', 'selection', 'spellchecker' ] },
  '/',
  { name: 'links' },
  '/',
  { name: 'insert' },
  '/',
  { name: 'forms' },
  '/',
  { name: 'tools' },
  '/',
  { name: 'document',    groups: [ 'mode', 'document', 'doctools' ] },
  '/',
  { name: 'others' },
  '/',
  { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
  '/',
  { name: 'paragraph',   groups: [ 'list', 'indent', 'blocks', 'align' ] },
  '/',
  { name: 'styles' },
  '/',
  { name: 'colors' },
  '/',
  { name: 'about' }
 ];

 //config.removePlugins = 'elementspath'; config.resize_enabled = false;
 //config.width = 600;
 //config.height = 120;
 //config.startupMode = 'source';
 config.enterMode = CKEDITOR.ENTER_BR;
};

'/' 用來分行。如果想要把某些工具列拿掉，又不知道名稱的話，可以使用完整模式(full)，然後一個工具列一行。這樣就可以找出工具列的名稱。

如果每次使用的 CKEditor 不一定都一樣，例如有的要完整的功能，有的只要能上色、字體加粗就好，那要針對該文字區域各別呼叫一段 javascript 做設定。

<textarea name="t001" id="t001"><?php echo $aaa;?></textarea>
<script type='text/javascript'>
CKEDITOR.replace( 't001', {
 toolbar: [
  { name: 'document', items: [ 'Source' ] }, // Defines toolbar group with name (used to create voice label) and items in 3 subgroups.
  { name: 'basicstyles', items: [ 'Bold', 'Italic' ] },
  { name: 'colors', items: [ 'TextColor', 'BGColor', 'RemoveFormat' ] }
 ],
 height: 120,
 removePlugins: 'elementspath',
 resize_enabled: false
});
</script>

<textarea name="t002" id="t002"><?php echo $bbb;?></textarea>
<script type='text/javascript'>
CKEDITOR.replace( 't002', {
 toolbar: [
  { name: 'document', items: [ 'Source' ] }, // Defines toolbar group with name (used to create voice label) and items in 3 subgroups.
  { name: 'basicstyles', items: [ 'Bold', 'Italic' ] },
  { name: 'colors', items: [ 'TextColor', 'BGColor', 'RemoveFormat' ] }
 ],
 height: 250,
});
</script>

去除 CKEditor 自動添加的 <p></p>
config.enterMode = CKEDITOR.ENTER_BR;
config.shiftEnterMode = CKEDITOR.ENTER_P;
這是把原本預設的行為顛倒過來。(參考)

預設原始碼模式
config.startupMode = 'source';

.