CKEditor 添加自訂按鈕

標籤：style   http   使用   檔案   io   for   cti   html   

1、下載ckeditor,我這裡下載的是CKEditor 3.6.2。

2、裡邊有壓縮過的代碼及源碼，源碼所在目錄為_source，還有一些使用例子，具體不做累述

此處主要講的是在使用過程需要添加自訂按鈕。

 

2. 比如我要添加“插入代碼”的按鈕，起名為code。在ckeditor/plugins下建立檔案夾code，在code檔案夾裡加入一個小圖片如code.gif，然後在code檔案夾裡建立plugin.js檔案，內容如下：

//一鍵排版
(function () {

 b = ‘format_wz‘;

 CKEDITOR.plugins.add(b, {

       requires: [‘styles‘, ‘button‘],

       init: function (a) {

               a.addCommand(b, CKEDITOR.plugins.autoformat.commands.autoformat);

               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);

               }

         }

    }

}；

  //執行的方法
    function formatText(editor) {

         var myeditor = editor;

          //得到要編輯的原始碼       
          var editorhtml = myeditor.getData();
         //在這裡執行你的操作。。。。。

      editorhtml= editorhtml.replace(/(<\/?(?!br|p|img|a|h1|h2|h3|h4|h5|h6)[^>\/]*)\/?>/gi,‘‘);    
        //在p標籤處添加樣式，使每個段落自動縮排兩個字元
        editorhtml= editorhtml.replace(/\<[p|P]>/g,"<p style=‘text-indent: 2em‘>");

           //再將內容放回到編輯器中
          editor.setData(html);

  }

 })();

3. 修改config.js來註冊code外掛程式。用如下代碼替換config.js原來內容：

 

CKEDITOR.editorConfig = function( config ) {  

 //配置CKFinder

 config.extraPlugins = "code,uploadImg";

//建立外掛程式  config.toolbar_temp =         [       

   { name: ‘document‘, items: [‘code‘,‘format_wz‘, ‘Save‘] },        

         { name: ‘styles‘, items: [‘Styles‘, ‘Format‘, ‘Font‘, ‘FontSize‘] }         ];

   config.toolbar_Full =         [        

  { name: ‘document‘, items: [‘code‘, ‘Source‘,‘-‘,‘format_wz‘,‘-‘, ‘Save‘, ‘NewPage‘, ‘DocProps‘, ‘Preview‘, ‘Print‘, ‘-‘, ‘Templates‘] },            

     { name: ‘tools‘, items: [‘Maximize‘, ‘ShowBlocks‘, ‘-‘, ‘About‘] }         ];    

};

注意我的CKEditor配置都是通過修改config.js來完成

4. 安裝CKEditor，在要引入CKEditor的頁面中script標籤內添加如下js代碼：

var editor=CKEDITOR.replace(‘p_Content_content‘,{
          fullPage: true,
          extraPlugins: ‘uploadImg,format_wz,docprops‘
      });
      CKFinder.setupCKEditor(editor, ‘ckfinder‘);

5.重新整理頁面，就能看到自己後添加的按鈕了。