首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

CKeditor富文本编辑器使用技巧之添加自定义插件的方法

Posted in Javascript onJune 14, 2019

本文实例讲述了CKeditor富文本编辑器使用技巧之添加自定义插件的方法。分享给大家供大家参考，具体如下：

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

CKeditor富文本编辑器使用技巧之添加自定义插件的方法

qchoice目录下的结构如下：

CKeditor富文本编辑器使用技巧之添加自定义插件的方法

然后， images中如下：

CKeditor富文本编辑器使用技巧之添加自定义插件的方法

dialogs中如下：

CKeditor富文本编辑器使用技巧之添加自定义插件的方法

我们先来看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程序设计有所帮助。

CKeditor富文本编辑器使用技巧之添加自定义插件的方法

- Author -

luyaran

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
[原创]js获取数组任意个不重复的随机数组元素
Mar 15 Javascript
网页右侧悬浮滚动在线qq客服代码示例
Apr 28 Javascript
JS按回车键实现登录的方法
Aug 25 Javascript
基于BootStrap Metronic开发框架经验小结【二】列表分页处理和插件JSTree的使用
May 12 Javascript
jQuery实现鼠标悬停3d菜单展开动画效果
Jan 19 Javascript
js实现字符全排列算法的简单方法
May 01 Javascript
jquery一键控制checkbox全选、反选或全不选
Oct 16 jQuery
vue-resource拦截器设置头信息的实例
Oct 27 Javascript
VUE + UEditor 单图片跨域上传功能的实现方法
Feb 08 Javascript
vue数据控制视图源码解析
Mar 28 Javascript
vue实现路由监听和参数监听
Oct 29 Javascript
jQuery模仿ToDoList实现简单的待办事项列表
Dec 30 jQuery
Vue动态创建注册component的实例代码
Jun 14 #Javascript
基于Proxy的小程序状态管理实现
Jun 14 #Javascript
深度了解vue.js中hooks的相关知识
Jun 14 #Javascript
Vue 实现前进刷新后退不刷新的效果
Jun 14 #Javascript
在Vue中使用icon 字体图标的方法
Jun 14 #Javascript
移动端底部导航固定配合vue-router实现组件切换功能
Jun 13 #Javascript
后台使用freeMarker和前端使用vue的方法及遇到的问题
Jun 13 #Javascript
多线程(6) muduo(1) 忘记密码(1) pt-archiver(1) ICF-5900W(2) EventBus(1) Spring Boot(5) TcpServer(1) Fragment(1) Spring-Retry(1)
You might like
PHP入门学习的几个不错的实例代码
2008/07/13 PHP
PHP+MYSQL 出现乱码的解决方法
2008/08/08 PHP
PHP资源管理框架Assetic简介
2014/06/12 PHP
简单实用的网站PHP缓存类实例
2014/07/18 PHP
smarty中英文多编码字符截取乱码问题解决方法
2014/10/28 PHP
学习php设计模式 php实现建造者模式
2015/12/07 PHP
Javascript查询DBpedia小应用实例学习
2013/03/07 Javascript
结合JQ1.9通过js正则判断各种浏览器版本的方法
2013/12/30 Javascript
悬浮数字的实现案例
2014/02/19 Javascript
JavaScript字符串常用的方法
2016/03/10 Javascript
javascript拖拽应用实例
2016/03/25 Javascript
javascript 小数乘法结果错误的处理方法
2016/07/28 Javascript
JS 在数组指定位置插入/删除数据的方法
2017/01/12 Javascript
jQuery实现获取h1-h6标题元素值的方法
2017/03/06 Javascript
Angular.JS中select下拉框设置value的方法
2017/06/20 Javascript
Angular5中调用第三方js插件的方法
2018/02/26 Javascript
angularjs实现table增加tr的方法
2018/02/27 Javascript
Smartour 让网页导览变得更简单(推荐)
2019/07/19 Javascript
[01:48]DOTA2 2015国际邀请赛中国区预选赛第二日战报
2015/05/27 DOTA
[04:50]2019DOTA2高校联赛秋季赛四强集锦
2019/12/27 DOTA
简单介绍Python中的len()函数的使用
2015/04/07 Python
详解Python中的循环语句的用法
2015/04/09 Python
python3中的md5加密实例
2018/05/29 Python
解决安装pycharm后不能执行python脚本的问题
2019/01/19 Python
python实现计数排序与桶排序实例代码
2019/03/28 Python
深入浅析Python 中 is 语法带来的误解
2019/05/07 Python
Python 获取指定文件夹下的目录和文件的实现
2019/08/30 Python
Python打包工具PyInstaller的安装与pycharm配置支持PyInstaller详细方法
2020/02/27 Python
学校运动会广播稿范文
2014/10/02 职场文书
2014小学二年级班主任工作总结
2014/12/05 职场文书
就业推荐表导师评语
2014/12/31 职场文书
小学教师岗位职责
2015/04/02 职场文书
工作汇报材料难写？方法都在这里了！
2019/07/01 职场文书
分析Java中Map的遍历性能问题
2021/06/26 Java/Android
十大最强格斗系宝可梦,超梦X仅排第十，第二最重格斗礼仪
2022/03/18 日漫
Python采集股票数据并制作可视化柱状图
2022/04/04 Python