本文包括安裝配置、使用 CKEditor以及使用CKFinder實現圖片上傳功能

說在前面，CKEditor和CKFinder有很詳細很詳細的文件說明，一切都能在裡面找到

1. 下載

CKEditor包括Basic、Standard、Full版本，選擇一個下載即可，之後可以再增加擴充套件

2. 配置

解壓安裝包到伺服器根目錄下，如/www/ckeditor，之後可以直接訪問目錄下的/www/ckeditor/samples/index.html，如下

在其下方有一些文件說明，最上面的導航欄有個定製ToolBar的按鈕

ToolBar定製介面

選擇：TOOLBAR CONFIGURATOR -> Advanced，如下

在這裡可以直接修改下面的程式碼，增刪Toolbar

CKeditor的配置檔案在ckeditor/config.js裡，不知道為什麼我修改這個沒有用，所以就直接在HTML裡指定了

<script>
    var editor = CKEDITOR.replace( 'editor1', {
        width: '100%',//寬和高，支援px和比例
        height: 350,
        language: 'zh-cn',//語言
        extraPlugins: 'justify,panelbutton,colorbutton',//手動安裝的擴充套件
 

        removeDialogTabs : 'image:advanced;image:Link', //移除圖片插入視窗的高階和連結
        toolbar:    //下面就是ToolBar的配置
        [
            { name: 'clipboard', items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] },
            { name: 'editing', items: [ 'Scayt' ] },
            { name: 'links'
 
, items: [ 'Link', 'Unlink'] },
            { name: 'insert', items: [ 'Image', 'Table', 'HorizontalRule', 'SpecialChar' ] },
            { name: 'document', items: [ 'Source' ] },
            { name: 'tools', items: [ 'Maximize' ] },
            '/',
            { name: 'basicstyles', items: [ 'Bold', 'Italic', 'Underline', 'Strike', '-', 'RemoveFormat' ] },
            { name: 'color', items: ['TextColor'] },
            { name: 'paragraph', items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote' ] },
            { name: 'justify', items: ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock' ] },
            { name: 'styles', items: [ 'Styles', 'Format' ] }
        ],
        image_previewText: '<br><br><br><br><br><br><br><h3>請點選瀏覽伺服器或者右側上傳按鈕</h3>',//圖片插入視窗的圖片預覽文字
    });
    CKFinder.setupCKEditor(editor);//檔案伺服器
</script>

上面指令碼的效果如下

3. 配置具體說明

3.1 額外的擴充套件 extraPlugins

extraPlugins: 'justify,panelbutton,colorbutton'//用逗號隔開，沒有空格

3.2 ToolBar配置

Toolbar中各個按鈕的位置就像上面那樣設定，如果沒有某個功能如字型顏色，可以手動安裝擴充套件，然後就可以使用了

3.3 使用CKFinder實現圖片或者檔案上傳

這樣文字和圖片就能分離儲存了，文本里儲存的只是圖片的URL

文件說的很詳細，最簡單的做法直接加入這句

CKFinder.setupCKEditor(editor);//editor是CKEDITOR.replace的返回值

當然也可以配置CKEditor，在上面的replace函式里加上下面這些，注意每個url對應的作用

filebrowserBrowseUrl: '/ckfinder/ckfinder.html',
filebrowserImageBrowseUrl: '/ckfinder/ckfinder.html?type=Images',
filebrowserUploadUrl: '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files',
filebrowserImageUploadUrl: '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images',

4. 獲取和傳送資料

一句話：

var data = CKEDITOR.instances.editor1.getData();

詳細見文件

獲取到資料(字串，而且是轉成html實體的)之後，就能通過POST傳送到伺服器了

5. 程式碼