CKeditor富文本编辑器使用技巧之添加自定义插件的方法
程序员文章站
2023-12-01 21:50:58
本文实例讲述了ckeditor富文本编辑器使用技巧之添加自定义插件的方法。分享给大家供大家参考,具体如下:
首先就是在ckeditor的plugins目录下新建一个目录q...
本文实例讲述了ckeditor富文本编辑器使用技巧之添加自定义插件的方法。分享给大家供大家参考,具体如下:
首先就是在ckeditor的plugins目录下新建一个目录qchoice:
qchoice目录下的结构如下:
然后, images中如下:
dialogs中如下:
我们先来看plugins.js文件的内容:
(function() { ckeditor.plugins.add("qchoice", { requires: ["dialog"], init: function(a) { a.addcommand("qchoice", new ckeditor.dialogcommand("qchoice")); a.ui.addbutton("qchoice", { label: "qchoice",//调用dialog时显示的名称 command: "qchoice", icon: this.path + "images/qchoice.jpg"//在toolbar中的图标 }); ckeditor.dialog.add("qchoice", this.path + "dialogs/qchoice.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文件中,可以改变它的内容,来实现不同的功能。
好啦,本次记录就到这里了。
更多关于javascript相关内容感兴趣的读者可查看本站专题:《javascript错误与调试技巧总结》、《javascript操作xml文件技巧总结》、《javascript中json操作技巧总结》、《javascript数据结构与算法技巧总结》、《javascript遍历算法与技巧总结》及《javascript数学运算用法总结》
希望本文所述对大家javascript程序设计有所帮助。
上一篇: vue实现前台列表数据过滤搜索、分页效果
下一篇: 微信小程序前端自定义分享的实现方法