CKEditor 添加自定义插件

最新推荐文章于 2025-11-18 01:10:35 发布

转载最新推荐文章于 2025-11-18 01:10:35 发布 · 3.8k 阅读

前端工具目录同时被 2 个专栏收录

115 篇文章

订阅专栏

前端技术问题解决

56 篇文章

订阅专栏

本文介绍如何为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>");
                } 
           };   
       }); 
    } 
})