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程序设计有所帮助。

Javascript 相关文章推荐
日期处理的js库(迷你版)--自建js库总结
Nov 21 Javascript
jquery读写cookie操作实例分析
Dec 24 Javascript
详解原生JavaScript实现jQuery中AJAX处理的方法
May 10 Javascript
js删除Array数组中指定元素的两种方法
Aug 03 Javascript
Vue学习笔记进阶篇之过渡状态详解
Jul 14 Javascript
js中getBoundingClientRect的作用及兼容方案详解
Feb 01 Javascript
微信小程序实现省市区三级地址选择
Jun 21 Javascript
了解JavaScript表单操作和表单域
May 27 Javascript
Vue.js+cube-ui(Scroll组件)实现类似头条效果的横向滚动导航条
Jun 24 Javascript
使用Vue.js和MJML创建响应式电子邮件
Mar 23 Vue.js
详解JS WebSocket断开原因和心跳机制
May 07 Javascript
小程序自定义轮播图圆点组件
Jun 25 Javascript
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
You might like
简单的页面缓冲技术
2006/10/09 PHP
WordPress中转义HTML与过滤链接的相关PHP函数使用解析
2015/12/22 PHP
为radio类型的INPUT添加客户端脚本(附加实现JS来禁用onClick事件思路代码)
2010/11/11 Javascript
Jquery多选下拉列表插件jquery multiselect功能介绍及使用
2013/05/24 Javascript
js页面跳转的问题(跳转到父页面、最外层页面、本页面)
2013/08/14 Javascript
Knockout数组(observable)使用详解示例
2013/11/15 Javascript
javascript正则表达式使用replace()替换手机号的方法
2015/01/19 Javascript
js获取地址栏参数的两种方法
2017/06/27 Javascript
基于ES6作用域和解构赋值详解
2017/11/03 Javascript
Vue中this.$router.push参数获取方法
2018/02/27 Javascript
js中实例与对象的区别讲解
2019/01/21 Javascript
利用Webpack实现小程序多项目管理的方法
2019/02/25 Javascript
js实现随机数小游戏
2019/06/28 Javascript
jQuery实现html可联动的百分比进度条
2020/03/26 jQuery
基于element-ui对话框el-dialog初始化的校验问题解决
2020/09/11 Javascript
Python2.x中str与unicode相关问题的解决方法
2015/03/30 Python
python删除字符串中指定字符的方法
2018/08/13 Python
python的依赖管理的实现
2019/05/14 Python
Python3 sys.argv[ ]用法详解
2019/10/24 Python
打印tensorflow恢复模型中所有变量与操作节点方式
2020/05/26 Python
解决Tensorflow2.0 tf.keras.Model.load_weights() 报错处理问题
2020/06/12 Python
OpenCV+Python3.5 简易手势识别的实现
2020/12/21 Python
css3实现圆锥渐变conic-gradient效果
2020/02/12 HTML / CSS
英国电子产品购物网站:TobyDeals
2018/07/30 全球购物
猫咪家具:CatsPlay
2018/11/03 全球购物
优质美利奴羊毛袜,不只是徒步旅行:Darn Tough Vermont
2018/11/05 全球购物
Lime Crime官网:美国一家主打梦幻精灵系的彩妆品牌
2019/03/22 全球购物
美国沙龙美发产品购物网站:Hair.com by L’Oreal
2020/11/09 全球购物
秘书行业自我鉴定范文
2013/12/30 职场文书
关于毕业的广播稿
2014/01/10 职场文书
小学生民族团结演讲稿
2014/08/27 职场文书
离婚协议书范本
2015/01/26 职场文书
您对思维方式了解多少?
2019/12/09 职场文书
python tkinter实现定时关机
2021/04/21 Python
解析MySQL binlog
2021/06/11 MySQL
python 字典和列表嵌套用法详解
2021/06/29 Python