CKEditor配置及使用

時間 2019-11-20

標籤 ckeditor 配置使用简体版

原文原文鏈接

注：使用CKEditor版本爲js版本的CKEditor 4，全部配置均參考自CKEditor官方API：http://docs.ckeditor.com/，以及實踐經驗javascript

1、快速使用

一、引入CKEditor的js文件

// 當此文件載入完畢以後，CKEditor的JavaScript API就已準備就緒，可使用
<script src="ckeditor/ckeditor.js"></script>

二、頁面中使用CKEditor

// 在須要使用編輯器的地方插入textarea標籤
<textarea name="editor" id="editor"></textarea>
CKEDITOR.replace('editor');

具體示例：html

 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>

2、CKEditor的配置

配置方法一：

使用CKEditor提供的config.js文件，文件所在目錄跟ckeditor.js的文件在同一目錄下：java

 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的地方配置：ajax

// 以對象方式做爲配置參數
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>

解決方式二：ide

使用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使用的粗淺看法，有錯漏之處敬請指出，共同探討！

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。