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来，其余的东西，就是要记得加载高亮语法的套件啰。