CKEditor 添加自定义插件

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:  '' ,              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>" );                  }              };            });       }  })

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

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

注意事项：在editor.css 中添加自定义插件的icon，例如.cke_button__code_icon {background: url(icons.png?t=20af917) no-repeat 0 -960px !important;}；