ckeditor是一個非常好用的線上富文字編輯器，但是由於其不自帶程式碼高亮，所以需要我們自己新增程式碼高亮。官方給出的方法是在ckeditor/plugins中註冊外掛，由於現在版本的ckeditor已經自帶程式碼高亮外掛，於是可以直接註冊，具體教程網上都有，但是按照官網註冊後編輯框並不能自動顯示出，新增程式碼的圖示，我發現還是需要手動新增，網上很多教程都已經過時了，我現在來做一份最新的ckeditor程式碼高亮外掛，新增教程；

一、方法：

（1）在ckeditor/config.js中，新增

config.extraPlugins: "codesnippet";

來註冊這個外掛

（2）在專案的settings.py中新增：

CKEDITOR_CONFIGS = {
    'default': {
         'toolbar': (['div', 'Source', '-', 'Save', 'NewPage', 'Preview', '-', 'Templates'],
                    ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-','Print','SpellChecker','Scayt'],
                    ['Undo', 'Redo', '-', 'Find', 'Replace', '-', 'SelectAll', 'RemoveFormat','-','Maximize', 'ShowBlocks', '-',"CodeSnippet"
 
, 'Subscript', 'Superscript'],
                    ['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton',
                     'HiddenField'],
                    ['Bold', 'Italic', 'Underline', 'Strike', '-'],
                    ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', 'Blockquote'],
                    ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'],
                    ['Link', 'Unlink', 'Anchor'],
                    ['Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak'],
                    ['Styles', 'Format', 'Font', 'FontSize'],
                    ['TextColor', 'BGColor'],

                    ),
        'extraPlugins': 'codesnippet',
    }
}
 

（3）大功告成

二、網上教程失效原因

新註冊的外掛並不會自動新增，需要手動在設定中新增按鈕，按鈕的名稱要與在對應外掛plugin.js中註冊的按鈕名稱一樣，如果不一樣，就會出現按鈕無法顯示的問題。網上的其他教程中，出現的註冊按鈕名為codesnippet，而實際上我閱讀原始碼後得知，在外掛中，註冊的名字是CodeSnippet同理，如果其他外掛的按鈕無法顯示可以考慮相同問題。

三、js中新增按鈕的程式碼解釋：

(function () {

 b = 'format_wz';

 CKEDITOR.plugins.add(b, {

       requires: ['styles', 'button'],

       init: function (a) {

               a.addCommand(b, CKEDITOR.plugins.autoformat.commands.autoformat);
                            //按鈕名稱，在toolbar註冊時必須保持名字與這裡一致
               a.ui.addButton('format_wz', {
                            //滑鼠移上去的提示
                      label: "一鍵排版",

                      command: 'format_wz',
                            //圖示
                      icon: this.path + "format_wz.png"

          });

       }

 });

 CKEDITOR.plugins.autoformat = {

     commands: {

          autoformat: {

                exec: function (editor) {

                     formatText(editor);

               }

         }

    }

};