注：使用CKEditor版本為js版本的CKEditor 4，所有配置均參考自CKEditor官方API：http://docs.ckeditor.com/，以及實踐經驗
一、快速使用
1、引入CKEditor的js文件
// 當此文件載入完畢之后，CKEditor的JavaScript API就已准備就緒，可以使用 <script src="ckeditor/ckeditor.js"></script>
2、頁面中使用CKEditor
// 在需要使用編輯器的地方插入textarea標簽 <textarea name="editor" id="editor"></textarea> CKEDITOR.replace('editor');
具體示例：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Learning CKEditor</title> 6 </head> 7 <body> 8 <textarea name="editor" id="editor" cols="30" rows="10"></textarea> 9 <script type="text/javascript" src="ckeditor/ckeditor.js"></script> 10 <script type="text/javascript"> 11 CKEDITOR.replace('editor'); 12 </script> 13 </body> 14 </html>
二、CKEditor的配置
配置方法一：
使用CKEditor提供的config.js文件，文件所在目錄跟ckeditor.js的文件在同一目錄下：
1 // 直接將配置內容寫在function函數內即可 2 CKEDITOR.editorConfig = function( config ) { 3 config.uiColor = '#f1e4db'; 4 config.height = 200; 5 config.removePlugins = 'elementspath,resize'; // 移除編輯器底部狀態欄顯示的元素路徑和調整編輯器大小的按鈕 6 config.allowedContent = false; // 是否允許使用源碼模式進行編輯 7 config.forcePasteAsPlainText = true; // 是否強制復制過來的文字去除格式 8 config.enterMode = CKEDITOR.ENTER_BR; // 編輯器中回車產生的標簽CKEDITOR.ENTER_BR(<br>),CKEDITOR.ENTER_P(<p>),CKEDITOR_ENTER(回車) 9 // 設置快捷鍵 10 // 用於實現Ctrl + V進行粘貼 11 // 無此配置，無法進行快捷鍵粘貼 12 config.keystrokes = [ 13 [CKEDITOR.CTRL + 86 /* V */, 'paste'] 14 ]; 15 16 // 設置快捷鍵，可能與瀏覽器沖突plugins/keystrokes/plugin.js 17 // 用於實現Ctrl + V進行粘貼 18 // 此配置將會啟動粘貼之前進行過濾，若無此配置，將會出現粘貼之后才彈出過濾框 19 config.blockedKeystrokes = [ 20 CKEDITOR.CTRL + 86 21 ]; 22 23 // 圖片上傳相關 24 config.filebrowserImageUploadUrl = './upload'; // 圖片上傳路徑 25 config.image_previewText = ' '; // 圖片信息面板預覽區內容的文字內容，默認顯示CKEditor自帶的內容 26 config.removeDialogTabs = 'image:advanced;image:Link'; // 移除圖片上傳頁面的'高級','鏈接'頁簽 27 }
配置方法二：
直接在使用CKEditor的地方配置：
// 以對象方式作為配置參數 CKEDITOR.replace('editor', { uiColor: '#ffccdd' });
還有一種配置方式是直接更改CKEditor源碼進行配置，這種方式破壞了CKEditor原有的數據，個人認為，實在不應該，這里不對其進行介紹。有興趣的可以自己研究。
注意：直接在使用的地方進行配置比在config.js文件中配置CKEditor的優先級高，而config.js文件中的配置又比CKEditor的默認配置優先級高，即若這幾個地方都有進行配置，則直接在頁面配置的參數會覆蓋config.js頁面的配置，config.js的配置又會覆蓋默認配置
另注：未進行配置的項，將使用CKEditor的默認配置
另：還有一些其他的配置方式，有興趣的可以去官網看看：
http://docs.ckeditor.com/#!/guide/dev_configuration
CKEditor工具欄配置
方法一：使用工具欄配置程序，通過界面操作自動生成，配置程序在ckeditor下的sample文件夾內，點擊index.html即可啟動
可以在界面進行操作，通過界面上方的工具欄來查看生成的配置會將我們的工具欄配置成什么模樣。
操作結束之后點擊Get toolbar config按鈕，即可查看當前配置，程序默認配置如下
也可以點擊上方的Basic-Advanced開關按鈕進行生成配置：
其中'/'是對工具欄進行換行顯示，並且toolbarGroups與toolbar兩個的配置選項不太一樣，其中toolbarGroups中的groups是CKEditor已經默認分好的組別，放在一起的多個組別之間會自動添加分割線，每個組別有一至多個項，每個項代表一個操作，而toolbar配置中的item則表示的是每一個項，可以通過添加'-'來進行分割。toolbarGroups數組和toolbar數組中的name，則是為了屏幕閱讀器而提供的。
以上生成的配置，可以寫在config.js也可以直接寫在頁面上。
如果不想使用配置程序，也可以自己進行編寫配置，大致配置可以參考配置程序生成的配置。以下只舉例item的另一種書寫方式
config.toolbar = [ [ 'Source' ], [ 'Cut', 'Undo' ] ];
不添加name，直接使用數組形式去書寫。
注意：item的這種方式toolbar數組內的每個元素都是數組，而之前的方式toolbar和toolbarGroups數組內的每個元素都是一個對象。
關於圖片上傳的問題
當在使用CKEditor的時候，即使我們的工具欄中有圖片上傳的工具，但打開的時候卻沒有上傳的頁簽，只有一個圖片詳細信息的頁面
這個是因為我們沒有配置圖片上傳路徑所導致的，即沒有配置filebrowserImageUploadUrl，加上這個配置就會出現其他的頁簽
變成了四個頁簽，上傳頁簽也出來了，通過config.removeDialogTabs = 'image:advanced;image:Link';配置，可以移除鏈接也高級兩個頁簽
注：CKEditor中的圖片上傳使用到了JSONP跨域傳輸
關於CKEditor賦值問題
在CKEditor中，若要為CKEditor賦值，可以使用.setData('user data')方法。
BUT，這有個問題，若我是在頁面一打開的時候就對CKEditor進行賦值，這會不會導致什么問題呢？答案是會的，因為CKEditor不一定已經准備就緒可以對其進行操作。
解決方式一：
可以直接將值寫在<textarea>標簽中
<textarea id='editor'>Test Data</textarea>
解決方式二：
使用CKEditor的instanceReady事件
在初始化CKEditor的時候，將CKEditor存儲下來，之后添加instanceReady事件
CKEditor = CKEDITOR.replace('editor');
// 添加instanceReady事件
CKEditor.on('instanceReady',function(data) {
CKEditor.setData(data);
}
以上方式能夠較好的解決CKEditor的賦值問題
BUT，方式二還是會出現問題：instanceReady事件只會觸發一次，那就是在CKEditor實例創建完畢之后便觸發，若我是在實例創建之后的一段時間，即是在事件觸發時間之后才對其進行賦值，那么賦值一樣會失敗，事件觸發的時候，data數據是空的。
那這時候應該怎么辦呢？將instanceReady事件和.setData()方法直接結合起來使用，像這樣
1 // 添加instanceReady事件 2 CKEditor.on('instanceReady',function(data) { 3 CKEditor.setData(data); 4 } 5 CKEditor.setData(data);
以上這種方法也是一種方式，不過，這樣看起來太low了點。
那么，我們換種方式
解決方式三：
CKEditor中有個狀態屬性status，這個屬性就可以被我們拿來使用了
CKEditor處於不同的階段，status就有不同的值，總共有四個值：unloaded, loaded, ready, destroyed
而我們需要用到的就是ready狀態值
1 var waitCKEditorReady = function(data) { 2 if(CKEditor.status == 'ready') { 3 CKEditor.setData(data); 4 } else { 5 setTimeout(function() { 6 waitCKEditorReady(data); 7 }, 20); 8 } 9 } 10 setTimeout(function() { 11 waitCKEditorReady('Test Data'); 12 }, 50);
以上這種方法，可以很好的解決之前提到的賦值問題，能夠放在ajax的回調中進行使用。
建議：若有可能盡量使用方式一
網絡上對於以上提出的一些問題，處理方式大都是直接去修改部分CKEditor的源碼。個人認為，這雖然也是一種方式，但卻不是好的做法，較好的做法應該是根據現有的資源在不改動源碼的前提下對CKEditor進行更改，或者寫個自己的插件對CKEditor進行拓展。而這也不該僅僅局限於CKEditor，而該是對所有的庫進行這樣的做法。
以上為本人對於CKEditor使用的粗淺見解，有錯漏之處敬請指出，共同探討！