CKEditor自定义功能开发

CKEditor是一个非常受欢迎的富文本编辑器，问世至今走了十年，依然还是市场老大，经得起时间考验就是好程序。因为经常写一些技术博文，可能有些地方需要插入code标签，而默认Ckeditor不具备插入code标签功能，但它提供的拓展灵活程度让我感觉这就是那么容易。本文介绍给CKEditor添加一个插入code标签插件的实现方式。

一、下载程序，解压

下载地址：http://ckeditor.com/

如果你没有下载错的话，解压后的目录应该跟截图一致。

二、创建插件目录

截图画红线的目录plugins就是CKEditor插件目录，所有的插件都集合在里边，在里边创建一个code目录，作为插入code标签功能的插件目录。

三、编写插件程序

CKEditor插件的规则是在插件目录下创建一个plugin.js文件作为插件主程序处理文件，如果是复杂的插件可能会有N个js文件。

因为插入code标签这个功能非常简单，所以一个plugin.js就能搞定。

代码：

// 添加一个插件
CKEDITOR.plugins.add('code', {
    // 插件初始化
    init: function(editor) {
        // 添加code按钮
        editor.ui.addButton('code', {
            // 鼠标移到按钮提示文字
            label: 'code',
            // 命令
            command: 'code',
            // 图标（相对于插件本身目录下）
            icon: this.path + 'images/code.gif',
           
        });
    }
});

四、制作按钮图标

图标文件名与路径要对应你在plugin.js中设置好的，因为我在plugin.js中定义的图标位置是在images目录下的code.gif图标，所以把code.gif图片放到插件目录的images目录下。

五、修改config.js配置文件

打开config.js，打开config.js，添加一句

config.extraPlugins += (config.extraPlugins ? ',code' : 'code');

最终config.js代码如下：

/**
 * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
 * For licensing, see https://ckeditor.com/legal/ckeditor-oss-license
 */
 
CKEDITOR.editorConfig = function( config ) {
    // Define changes to default configuration here.
    // For complete reference see:
    // https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html
    
    // The toolbar groups arrangement, optimized for two toolbar rows.
    config.toolbarGroups = [
        { name: 'clipboard',   groups: [ 'clipboard', 'undo' ] },
        { name: 'editing',     groups: [ 'find', 'selection', 'spellchecker' ] },
        { name: 'links' },
        { name: 'insert' },
        { name: 'forms' },
        { name: 'tools' },
        { name: 'document',       groups: [ 'mode', 'document', 'doctools' ] },
        { name: 'others' },
        '/',
        { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
        { name: 'paragraph',   groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] },
        { name: 'styles' },
        { name: 'colors' },
        { name: 'about' }
    ];
    
    // 这句代码是添加的 
    config.extraPlugins += (config.extraPlugins ? ',code' : 'code');
 
    // Remove some buttons provided by the standard plugins, which are
    // not needed in the Standard(s) toolbar.
    config.removeButtons = 'Underline,Subscript,Superscript';
 
    // Set the most common block elements.
    config.format_tags = 'p;h1;h2;h3;pre';
 
    // Simplify the dialog windows.
    config.removeDialogTabs = 'image:advanced;link:advanced';
};

六、测试，看可以了不

使用浏览器打开创建的HTML页面

OK拉，按钮出来了。

七、添加点击事件

打开之前创建plugin.js文件，添加click事件，最终代码如下：

// 添加一个插件
CKEDITOR.plugins.add('code', {
    // 插件初始化
    init: function(editor) {
        // 添加code按钮
        editor.ui.addButton('code', {
            // 鼠标移到按钮提示文字
            label: 'code',
            // 命令
            command: 'code',
            // 图标（相对于插件本身目录下）
            icon: this.path + 'images/code.gif',
            // 添加点击事件   
            click: function() {
                // 获取选取的文本
                var selectText = editor.getSelection().getSelectedText();
                // 判断选取的文本是否为空
                // 如果为空就啥都不干
                if (selectText !== "") {
                    // 判断你是要干嘛？
                    // 你是要添加code标签呢？
                    // 还是你要取消code标签？
                    if (editor.getSelection().getStartElement().getName() !== "code") {
                        // 添加code标签
                        var insertHtml = "<code>" + selectText + ""; editor.insertHtml(insertHtml); 
                    } else { 
                        // 取消code标签 
                        editor.insertText(selectText); 
                    } 
                } 
            } 
        }); 
    } 
});

重新运行浏览器，随便输入一行字，选中几个，点击code按钮，亲，这下可以了吧！

八、code标签样式

虽然，按钮功能可以用了，但还有点郁闷，就是code标签的文本跟其它标签的文本看起来没差别，看不出来哪些已经添加code标签。

我们给code标签添加几个样式，让它与众不同。打开ckeditor目录下的contents.css

在结尾处添加code样式

code {
    background: #f1f1f1;
    color:#ff7f50;
    border-radius:2px;
    padding:0 2px;
    margin:0 2px;
}

保存，重新运行看下效果！

如果需要取消code标签的文字只需要选择已被添加code标签的文字，再点击code按钮就好！