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文件中，可以改变它的内容，来实现不同的功能。

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

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

CKeditor使用之添加自定义插件相关推荐

html编辑器自定义脚本,CKeditor富文本编辑器使用技巧之添加自定义插件的方法
本文实例讲述了CKeditor富文本编辑器使用技巧之添加自定义插件的方法.分享给大家供大家参考,具体如下: 首先就是在CKeditor的plugins目录下新建一个目录qchoice: qchoice ...
Nagios+pnp4nagios+rrdtool 安装配置为nagios添加自定义插件(三)
nagios博大精深,可以以shell.perl等语句为nagios写插件,来满足自己监控的需要.本文写mysql中tps.qps的插件,并把收集到的结果以图形形式展现出来,这样输出的结果就有一定的要 ...
Vue.Js添加自定义插件
基于上篇我们讲了在window下搭建Vue.Js开发环境我们可以开发自己的vue.js插件发布到npm上,供大家下载使用. 1.首先打开cmd命令窗口,进入我们的工作目录下执行 cd E:\vu ...
idea添加自定义插件仓库灵狐插件、阿里代码规约插件安装idea插件推荐
1.plugins -> browse reposi -> manage reposi -> 点击绿色+号 2.输入 http://ide.alibaba-inc.com/idea/ ...
用于 CKeditor 编辑器的可视化数学公式插件
基于CKeditor编辑器的可视化的数学公式编辑器,可以返回数学公式. 将 CKeditor编辑器的config.js打开,在 CKEDITOR.editorConfig = function( co ...
ckeditor粘贴word文档图片的源码
项目需求可发布文章需求涉及到富文本编辑器经过查阅我选择了较为简便不需要后端支持可独立完成的tinymce框架官方文档也是相当完整虽然都是全英文但是有强大的谷歌~ 没问题的编辑器,tin ...
ckeditor 4.2.1_演示 ckeditor 上传插入图片
本文内容 FineUI ckeditor fckeditor/ckeditor 演示 ckeditor 4.2.1 上传&插入图片最近看了一下 FineUI_v3.3.1 控件,对里边的 c ...
php打印模板插件,smarty的插件功能是smarty模板的精华
一,smarty插件介绍 smarty的插件放在/smarty/libs/plugins下面,它为程序的开发提供了很大的方便,例如:{$yesterday|date_format:"%H:% ...
android插件做动态权限,Mui本地打包笔记（四）Android自定义插件的配置（以动态申请权限为例）...
通过自定义插件方式实现Android平台的动态申请权限功能在上一章中完成了在Mui中调用Android原生的动态权限请求功能(Android动态申请权限的问题).虽然说完成了功能,但是在使用上并不是 ...

CKeditor使用之添加自定义插件

CKeditor使用之添加自定义插件相关推荐

最新文章

热门文章