CKEditor自定义功能开发

WEB31,289字数 2988阅读模式

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

CKEditor自定义功能开发-图片1

一、下载程序,解压

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

CKEditor自定义功能开发-图片2

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

二、创建插件目录

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

CKEditor自定义功能开发-图片3

三、编写插件程序

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

四、制作按钮图标

CKEditor自定义功能开发-图片4

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

CKEditor自定义功能开发-图片5

五、修改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页面

CKEditor自定义功能开发-图片6

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按钮,亲,这下可以了吧!

CKEditor自定义功能开发-图片7

八、code标签样式

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

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

在结尾处添加code样式

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

保存,重新运行看下效果!

CKEditor自定义功能开发-图片8

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

本文已通过「原本」原创作品认证,转载请注明文章出处及链接。

WEB最后更新:2022-11-10
夏日阳光
  • 本文由 夏日阳光 发表于 2019年4月28日
  • 本文为夏日阳光原创文章,转载请务必保留本文链接:https://www.pieruo.com/53.html
评论  3  访客  2  作者  1
    • gxd
      gxd 1

      想问您点问题 方便加微信说下么?

        • 夏日阳光
          夏日阳光

          @ gxd 咋了?

        • gxd
          gxd 1

          在么

        匿名

        发表评论

        匿名网友
        :?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:
        确定

        拖动滑块以完成验证