CKeditor使用之添加自定义插件

浅浅的花香味﹌ 2022-05-14 08:40 524阅读 0赞

首先就是在CKeditor的plugins目录下新建一个目录qchoice：

![70][]

qchoice目录下的结构如下：

![70 1][]

然后， images中如下：

![70 2][]

dialogs中如下：

![70 3][]

我们先来看plugins.js文件的内容：

再来看qchoice.js文件的内容：

CKEDITOR.dialog.add('qchoice', function (editor) { //要和plugin.js 中的command 一致
        var escape = function (value) {
            return value;
        };
        return {
            title: '', //对话框标题
            minWidth: 500, //对话框宽度
            minHeight: 600,//对话框高度
            contents: [{   //对话框内容
                id: 'choice',
                name: 'choice',
                label: '插入选择题答案',
                title: '插入选择题答案',
                elements: [{
                    id: 'rdType_1',
                    type: 'radio', //表单元素类型：单选按钮
                    items: [['中国赞','[中国赞]'],['广告','[广告]'],['doge','[doge]'],['喵喵','[喵喵]'],['二哈','[二哈]'],['抱抱','[抱抱]'],['哼','[哼]'],['思考','[思考]'],['生病','[生病]'],['偷乐','[偷乐]']]
                },
                {
                    id: 'rdType_2',
                    type: 'radio', //表单元素类型：单选按钮
                    items: [['笑cry','[笑cry]'],['馋嘴','[馋嘴]'],['拜拜','[拜拜]'],['右哼哼','[右哼哼]'],['左哼哼','[左哼哼]'],['怒骂','[怒骂]'],['鄙视','[鄙视]'],['笑而不语','[笑而不语]']]
                },
                {
                    id: 'rdType_3',
                    type: 'radio', //表单元素类型：单选按钮
                    items: [['害羞','[害羞]'],['费解','[费解]'],['挖鼻','[挖鼻]'],['悲伤','[悲伤]'],['打脸','[打脸]'],['抓狂','[抓狂]'],['哈哈','[哈哈]'],['傻眼','[傻眼]'],['好喜欢','[好喜欢]'],['好爱哦','[好爱哦]']]
                },
                {
                    id: 'rdType_4',
                    type: 'radio', //表单元素类型：单选按钮
                    items: [['失望','[失望]'],['good','[good]'],['弱','[弱]'],['耶','[耶]'],['来','[来]'],['握手','[握手]'],['加油','[加油]'],['haha','[haha]'],['拳头','[拳头]'],['男孩儿','[男孩儿]']]
                },
                {
                    id: 'rdType_5',
                    type: 'radio', //表单元素类型：单选按钮
                    items: [['话筒','[话筒]'],['礼物','[礼物]'],['飞机','[飞机]'],['干杯','[干杯]'],['围脖','[围脖]'],['钟','[钟]'],['肥皂','[肥皂]'],['浪','[浪]'],['女孩儿','[女孩儿]'],['照相机','[照相机]']]
                },
                {
                    id: 'rdType_6',
                    type: 'radio', //表单元素类型：单选按钮
                    items: [['熊猫','[熊猫]'],['喜','[喜]'],['绿丝带','[绿丝带]'],['威武','[威武]'],['弗莱见钱眼开','[弗莱见钱眼开]'],['看涨','[看涨]'],['看跌','[看跌]'],['奥特曼','[奥特曼]'],['兔子','[兔子]']]
                }
                ,
                {
                    id: 'rdType_7',
                    type: 'radio', //表单元素类型：单选按钮
                    items: [['顶','[顶]'],['米奇喜欢','[米奇喜欢]'],['米奇飞吻','[米奇飞吻]'],['米奇大哭','[米奇大哭]'],['米奇比心','[米奇比心]'],['笑哈哈','[笑哈哈]'],['羞嗒嗒','[羞嗒嗒]'],['憧憬','[憧憬]'],['酷','[酷]']]
                }
                ,
                {
                    id: 'rdType_8',
                    type: 'radio', //表单元素类型：单选按钮
                    items: [['月亮','[月亮]'],['围观','[围观]'],['蛋糕','[蛋糕]'],['微风','[微风]'],['音乐','[音乐]'],['猪头','[猪头]'],['鲜花','[鲜花]'],['太阳','[太阳]'],['Aloha','[Aloha]'],['赞啊','[赞啊]'],['求关注','[求关注]']]
                }
                ,
                {
                    id: 'rdType_9',
                    type: 'radio', //表单元素类型：单选按钮
                    items: [['哈欠','[哈欠]'],['泪','[泪]'],['怒','[怒]'],['闭嘴','[闭嘴]'],['疑问','[疑问]'],['白眼','[白眼]'],['吐','[吐]'],['黑线','[黑线]'],['委屈','[委屈]'],['下雨','[下雨]'],['伤心','[伤心]']]
                }
                ,
                {
                    id: 'rdType_10',
                    type: 'radio', //表单元素类型：单选按钮
                    items: [['作揖','[作揖]'],['星星','[星星]'],['半星','[半星]'],['空星','[空星]'],['草泥马','[草泥马]'],['浮云','[浮云]'],['沙尘暴','[沙尘暴]'],['给力','[给力]'],['骷髅','[骷髅]'],['最右','[最右]']]
                }
                ,
                {
                    id: 'rdType_11',
                    type: 'radio', //表单元素类型：单选按钮
                    items: [['太开心','[太开心]'],['挤眼','[挤眼]'],['衰','[衰]'],['感冒','[感冒]'],['可怜','[可怜]'],['汗','[汗]'],['色','[色]'],['可爱','[可爱]'],['钱','[钱]'],['ok','[ok]'],['NO','[NO]'],['蜡烛','[蜡烛]']]
                }
                ,
                {
                    id: 'rdType_12',
                    type: 'radio', //表单元素类型：单选按钮
                    items: [['吃狗粮','[吃狗粮]'],['蚁人','[蚁人]'],['黄蜂女','[黄蜂女]'],['吃瓜','[吃瓜]'],['允悲','[允悲]'],['坏笑','[坏笑]'],['困','[困]'],['互粉','[互粉]'],['睡','[睡]'],['并不简单','[并不简单]']]
                }
                ,
                {
                    id: 'rdType_13',
                    type: 'radio', //表单元素类型：单选按钮
                    items: [['阴险','[阴险]'],['嘘','[嘘]'],['嘻嘻','[嘻嘻]'],['爱你','[爱你]'],['吃惊','[吃惊]'],['污','[污]'],['鼓掌','[鼓掌]'],['给你小心心','[给你小心心]'],['心','[心]'],['赞','[赞]']]
                }
                ,
                {
                    id: 'rdType_14',
                    type: 'radio', //表单元素类型：单选按钮
                    items: [['微笑','[微笑]'],['偷笑','[偷笑]'],['舔屏','[舔屏]'],['亲亲','[亲亲]'],['摊手','[摊手]'],['跪了','[跪了]'],['晕','[晕]'],['米奇爱你','[米奇爱你]'],['带着微博去旅行','[带着微博去旅行]']]
                }]
            }],
            onOk: function () { //点击确定按钮出发onOK事件。以下代码主要目的是构造一个select下拉框
                qtype_1 = this.getValueOf('choice', 'rdType_1');
                qtype_2 = this.getValueOf('choice', 'rdType_2');
                qtype_3 = this.getValueOf('choice', 'rdType_3');
                qtype_4 = this.getValueOf('choice', 'rdType_4');
                qtype_5 = this.getValueOf('choice', 'rdType_5');
                qtype_6 = this.getValueOf('choice', 'rdType_6');
                qtype_7 = this.getValueOf('choice', 'rdType_7');
                qtype_8 = this.getValueOf('choice', 'rdType_8');
                qtype_9 = this.getValueOf('choice', 'rdType_9');
                qtype_10 = this.getValueOf('choice', 'rdType_10');
                qtype_11 = this.getValueOf('choice', 'rdType_11');
                qtype_12 = this.getValueOf('choice', 'rdType_12');
                qtype_13 = this.getValueOf('choice', 'rdType_13');
                qtype_14 = this.getValueOf('choice', 'rdType_14');
                rtn = "";
    
                if(qtype_1 != null){
                    rtn += qtype_1;
                }
    
                if(qtype_2 != null){
                    rtn += qtype_2;
                }
    
                if(qtype_3 != null){
                    rtn += qtype_3;
                }
    
                if(qtype_4 != null){
                    rtn += qtype_4;
                }
    
                if(qtype_5 != null){
                    rtn += qtype_5;
                }
    
                if(qtype_6 != null){
                    rtn += qtype_6;
                }
    
                if(qtype_7 != null){
                    rtn += qtype_7;
                }
    
                if(qtype_8 != null){
                    rtn += qtype_8;
                }
    
                if(qtype_9 != null){
                    rtn += qtype_9;
                }
    
                if(qtype_10 != null){
                    rtn += qtype_10;
                }
    
                if(qtype_11 != null){
                    rtn += qtype_11;
                }
    
                if(qtype_12 != null){
                    rtn += qtype_12;
                }
    
                if(qtype_13 != null){
                    rtn += qtype_13;
                }
    
                if(qtype_14 != null){
                    rtn += qtype_14;
                }
    
                if (rtn != "") {
                    rtns = "<span>"+rtn+"</span>";
                    editor.insertHtml(rtns);
                }
                else {
                    return false;
                }
            }
        };
    });
    function htmlEncode(str) {
        var temp = document.createElement("div");
        (temp.textContent != null) ? (temp.textContent = str) : (temp.innerText = str);
        var output = temp.innerHTML;
        temp = null;
        return output;
    }

之后就是config.js配置文件的内容了：

/**
     * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
     * For licensing, see LICENSE.md or http://ckeditor.com/license
     */
    
    CKEDITOR.editorConfig = function( config ) {
    
        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' },
            { name: 'extent', items: ["qchoice"] }
        ];
    
        config.toolbar_Full = [
            ['Source','-','Save','NewPage','Preview','-','Templates'],
            ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print','SpellChecker', 'Scayt'],
            ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
            ['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select','Button', 'ImageButton', 'HiddenField'],
            '/',
            ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
            ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
            ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
            ['Link','Unlink','Anchor'],
            ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
            '/',
            ['Styles','Format','Font','FontSize'],
            ['TextColor','BGColor'],
            ["qchoice"]
        ];
    
        config.image_previewText=' ';
    
        config.filebrowserImageUploadUrl = 'uploadFiles';
    
        // config.extraPlugins = 'justify';
    
    
        config.extraPlugins += (config.extraPlugins ? ',justify' : 'justify');
        config.extraPlugins += (config.extraPlugins ? ',qchoice' : 'qchoice');
    
        // config.extraPlugins="linkbutton";
        //
        // config.extraPlugins="ilink";
        //
        // config.extraPlugins="ijuzi";
    
        // config.extraPlugins="iti";
    
        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';
    
        config.image_previewText=' ';
    
        config.entities = false;
    };

好啦，到这里，自定义插件就算是放入成功了。咱们自定义的插件主要的逻辑结构就是在qchoice.js文件中，可以改变它的内容，来实现不同的功能。

好啦，本次记录就到这里了。

如果感觉不错的话，请多多点赞支持哦。。。

[70]: /images/20220514/9bd74d9bacd241348912e37dee0047cb.png
[70 1]: /images/20220514/abf54faeec124a9dbb94b19dd4756527.png
[70 2]: /images/20220514/cbebd8dbae9b4ed7b36d5443fb8994e0.png
[70 3]: /images/20220514/b24555e7a09949efab3a593364b42683.png