CKEditor 自定义 ToolBar 按钮

CKEditor是个强大的编辑器，在很多项目中都是用这个编辑器让user编辑页面。因为接口十分类似Word，所以一般人都能轻易上手。只是最好还是要有Html的底子，不然有时候要排版也是会有困难。

 

 网络上已经有不少人实做出来，只是我这人很爱自己做轮子，想说趁这个机会学起来，以后如果真的要客制化功能，也许用的到!基本的CKeditor的安装跟使用还有跟CKFinder整合我就不多说啦。直接进入正题，自定义一个ToolBar按钮。将CKEditor下载回来解压缩丢到网站目录中，在ckeditor文件夹下可以看到一个"config.js"档，这档案是拿来做一些设定用的先贴上我的：

 

CKEDITOR.editorConfig = function (config) {     config.uiColor = '#AADC6E';     config.contentsCss = ['/Content/layout.css', '/Content/html.css'];     config.toolbar_Full =     [     ['Source','-','Save','NewPage','Preview','-','Templates'],     ['Undo', 'Redo', '-', 'SelectAll', 'RemoveFormat'],     ['Styles','Format','Font','FontSize'],     ['TextColor','BGColor'],     ['Maximize', 'ShowBlocks','-','About'],     '/',     ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],     ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote','CreateDiv'],     ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],     ['Link','Unlink','Anchor'],     ['Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak'],     ['Code']     ];     config.extraPlugins = 'CodePlugin'; };

前几行的设定都是一般的设定，uiColor是ckeditor的框框颜色，contentsCss是可以将css档加载，在编辑时就可以看到套用css后的效果。toolbar_Full是设定所要的功能，因为有很多我都用不到，所以就剩下上面所列的这些，注意最后一个['Code']，这不是内建的功能，这是我待会要扩充的功能，因此先放到toolbar中。最后一行也是比较重要的就是 config.extraPlugins = 'CodePlugin';
CodePlugin就是等等我们扩充的功能名称(可自定义)。

接着在ckeditor/plugins底下新增一个同上面那个名称的文件夹，并在里面加入一个plugin.js档，如下图所示：

接着就在plugin.js档内加入下面的code：

 

CKEDITOR.plugins.add('CodePlugin', {     init: function (editor) {         // Add the link and unlink buttons.         editor.addCommand('CodePlugin', new CKEDITOR.dialogCommand('CodePlugin')); //定義dialog，也就是下面的code         editor.ui.addButton('Code',     //定義button的名稱及圖片,以及按下後彈出的dialog         {                               //這裡將button名字取叫'Code'，因此剛剛上方的toolbar也是加入名為Code的按鈕             label: '插入高亮程式碼',             icon: '/images/icon/codeicon.png',             command: 'CodePlugin'         });         //CKEDITOR.dialog.add( 'link’, this.path + 'dialogs/link.js’ );           //dialog也可用抽離出去變一個js，不過這裡我直接寫在下面         CKEDITOR.dialog.add('CodePlugin', function (editor) {                //以下開始定義dialog的屬性及事件                        return {                        //定義簡單的title及寬高                 title: '插入程式碼',                 minWidth: 500,                 minHeight: 400,                 contents: [                                   {                         id: 'code',                         label: 'code',                         title: 'code',                         elements:              //elements是定義dialog內部的元件，除了下面用到的select跟textarea之外                             [                  //還有像radio或是file之類的可以選擇                             {                                 type: 'select',                                 label: 'Language',                                 id: 'language',                                 //required: true,                                 'default': 'csharp',                                 items: [['C#', 'csharp'], ['CSS', 'css'], ['Html', 'xhtml'], ['JavaScript', 'js'], ['SQL', 'sql'], ['XML', 'xml']]                             }                             , {                                 id: 'codecontent',                                 type: 'textarea',                                 label: '請輸入程式碼',                                 style: 'width:700px;height:500px',                                 rows: 30,                                 'default': ''                             }                             ]                     }                     ],                 onOk: function () {                                    //當按下ok鈕時,將上方定義的元件值取出來，利用insertHtml                      code = this.getValueOf('code', 'codecontent');    //將組好的字串插入ckeditor的內容中                      lang = this.getValueOf('code', 'language');                      editor.insertHtml("<pre class=\"brush:" + lang + ";\">" + code + "</pre>");                 }             };           });      }  })

 基本上这样就好了。其实不难，只是有点繁琐而已。先来看看结果：

按下之后跳出的dialog

按下确定之后，就会生出我们设定的Tag来，其余的东西，就是要记得加载高亮语法的套件啰。