首页
所有分类
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 相关文章推荐
JavaScript 基础问答三
Dec 03 Javascript
javascript针对DOM的应用实例（一）
Apr 15 Javascript
无缝滚动改进版支持上下左右滚动（封装成函数）
Dec 04 Javascript
javascript实现检验的各种规则
Jul 31 Javascript
BootStrapValidator校验方式
Dec 19 Javascript
JS实现的二叉树算法完整实例
Apr 06 Javascript
JavaScript函数中的this四种绑定形式
Aug 15 Javascript
vue 组件中添加样式不生效的解决方法
Jul 06 Javascript
详解ES6 Symbol 的用途
Oct 14 Javascript
js+canvas实现两张图片合并成一张图片的方法
Nov 01 Javascript
JavaScript组合设计模式--改进引入案例分析
May 23 Javascript
分享几个JavaScript运算符的使用技巧
Apr 24 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
SQL注入(2) GNN(1) #{}(1) 外键(1) 选择器(1) 图片模糊(1) canvas(2) 代理(2) flex(1) flex-shrink(1)
You might like
PHP计划任务、定时执行任务的实现代码
2011/04/23 PHP
PHP下载生成的csv文件及问题总结
2015/08/06 PHP
Laravel中如何增加自定义全局函数详解
2017/05/09 PHP
20款超赞的jQuery插件 Web开发人员必备
2011/02/26 Javascript
Jquery选中或取消radio示例
2013/09/29 Javascript
javascript制作的滑动图片菜单
2015/05/15 Javascript
JS组件Bootstrap Table使用方法详解
2016/02/02 Javascript
Node.js中Request模块处理HTTP协议请求的基本使用教程
2016/03/31 Javascript
JSONP原理及简单实现
2016/06/08 Javascript
超详细的JS弹出窗口代码大全
2020/04/18 Javascript
AngularJS实现与Java Web服务器交互操作示例【附demo源码下载】
2016/11/02 Javascript
js获取当前页的URL与window.location.href简单方法
2017/02/13 Javascript
js 开发之autocomplete=&quot;off&quot;在chrom中失效的解决办法
2017/09/28 Javascript
layer提示框添加多个按钮选择的实例
2019/09/12 Javascript
angular组件间传值测试的方法详解
2020/05/07 Javascript
.netcore+vue 实现压缩文件下载功能
2020/09/24 Javascript
Python读取sqlite数据库文件的方法分析
2017/08/07 Python
Python+Django搭建自己的blog网站
2018/03/13 Python
Python zip()函数用法实例分析
2018/03/17 Python
使用Python来开发微信功能
2018/06/13 Python
TensorFlow 模型载入方法汇总(小结)
2018/06/19 Python
Python小游戏之300行代码实现俄罗斯方块
2019/01/04 Python
Python3.7 dataclass使用指南小结
2019/02/22 Python
python 使用turtule绘制递归图形（螺旋、二叉树、谢尔宾斯基三角形）
2019/05/30 Python
Python Numpy,mask图像的生成详解
2020/02/19 Python
jupyter notebook参数化运行python方式
2020/04/10 Python
土木工程师岗位职责
2013/11/24 职场文书
大学三年的自我评价
2013/12/25 职场文书
运动会通讯稿100字
2014/01/31 职场文书
学校节能减排倡议书
2014/05/16 职场文书
优秀会计求职信
2014/07/04 职场文书
光棍节联谊晚会活动策划书
2014/10/10 职场文书
党的群众路线教育实践活动个人批评与自我批评
2014/10/16 职场文书
吃空饷专项整治方案
2014/10/27 职场文书
红色电影观后感
2015/06/18 职场文书
行政处罚决定书
2015/06/24 职场文书