侯体宗的博客
  • 首页
  • Hyperf版
  • beego仿版
  • 人生(杂谈)
  • 技术
  • 关于我
  • 更多分类
    • 文件下载
    • 文字修仙
    • 中国象棋ai
    • 群聊
    • 九宫格抽奖
    • 拼图
    • 消消乐
    • 相册

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

前端  /  管理员 发布于 5年前   555

本文实例讲述了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 = ""+rtn+"";        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程序设计有所帮助。

您可能感兴趣的文章:

  • FCKeditor .NET的配置、扩展与安全性经验交流
  • CKEditor 4.4.1 添加代码高亮显示插件功能教程【使用官方推荐Code Snippet插件】
  • CKEDITOR二次开发之插件开发方法
  • ckeditor自定义插件使用方法详解
  • FCKeditor 插件开发 示例(详细版本)
  • 添加FCKeditor插件需要注意的地方
  • fckeditor 修改记录添加行距功能插件
  • ckeditor插件开发简单实例
  • fckeditor 插件开发参考文档
  • SyntaxHighlighter配合CKEditor插件轻松打造代码语法着色
  • ckeditor syntaxhighlighter代码高亮插件配置分享
  • 手把手教你 CKEDITOR 4 扩展插件制作


  • 上一条:
    浅谈webpack 四个核心概念之Entry
    下一条:
    CKEditor 4.4.1 添加代码高亮显示插件功能教程【使用官方推荐Code Snippet插件】
  • 昵称:

    邮箱:

    0条评论 (评论内容有缓存机制,请悉知!)
    最新最热
    • 分类目录
    • 人生(杂谈)
    • 技术
    • linux
    • Java
    • php
    • 框架(架构)
    • 前端
    • ThinkPHP
    • 数据库
    • 微信(小程序)
    • Laravel
    • Redis
    • Docker
    • Go
    • swoole
    • Windows
    • Python
    • 苹果(mac/ios)
    • 相关文章
    • 使用 Alpine.js 排序插件对元素进行排序(0个评论)
    • 在js中使用jszip + file-saver实现批量下载OSS文件功能示例(0个评论)
    • 在vue中实现父页面按钮显示子组件中的el-dialog效果(0个评论)
    • 使用mock-server实现模拟接口对接流程步骤(0个评论)
    • vue项目打包程序实现把项目打包成一个exe可执行程序(0个评论)
    • 近期文章
    • 智能合约Solidity学习CryptoZombie第三课:组建僵尸军队(高级Solidity理论)(0个评论)
    • 智能合约Solidity学习CryptoZombie第二课:让你的僵尸猎食(0个评论)
    • 智能合约Solidity学习CryptoZombie第一课:生成一只你的僵尸(0个评论)
    • 在go中实现一个常用的先进先出的缓存淘汰算法示例代码(0个评论)
    • 在go+gin中使用"github.com/skip2/go-qrcode"实现url转二维码功能(0个评论)
    • 在go语言中使用api.geonames.org接口实现根据国际邮政编码获取地址信息功能(1个评论)
    • 在go语言中使用github.com/signintech/gopdf实现生成pdf分页文件功能(0个评论)
    • gmail发邮件报错:534 5.7.9 Application-specific password required...解决方案(0个评论)
    • 欧盟关于强迫劳动的规定的官方举报渠道及官方举报网站(0个评论)
    • 在go语言中使用github.com/signintech/gopdf实现生成pdf文件功能(0个评论)
    • 近期评论
    • 122 在

      学历:一种延缓就业设计,生活需求下的权衡之选中评论 工作几年后,报名考研了,到现在还没认真学习备考,迷茫中。作为一名北漂互联网打工人..
    • 123 在

      Clash for Windows作者删库跑路了,github已404中评论 按理说只要你在国内,所有的流量进出都在监控范围内,不管你怎么隐藏也没用,想搞你分..
    • 原梓番博客 在

      在Laravel框架中使用模型Model分表最简单的方法中评论 好久好久都没看友情链接申请了,今天刚看,已经添加。..
    • 博主 在

      佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 @1111老铁这个不行了,可以看看近期评论的其他文章..
    • 1111 在

      佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 网站不能打开,博主百忙中能否发个APP下载链接,佛跳墙或极光..
    • 2016-10
    • 2016-11
    • 2017-06
    • 2017-07
    • 2017-08
    • 2017-09
    • 2017-10
    • 2017-11
    • 2018-03
    • 2018-04
    • 2018-05
    • 2018-06
    • 2018-09
    • 2018-11
    • 2018-12
    • 2019-02
    • 2020-03
    • 2020-04
    • 2020-05
    • 2020-06
    • 2021-04
    • 2021-05
    • 2021-07
    • 2021-08
    • 2021-09
    • 2021-10
    • 2021-11
    • 2022-08
    • 2022-09
    • 2022-10
    • 2022-11
    • 2022-12
    • 2023-01
    • 2023-02
    • 2023-03
    • 2023-04
    • 2023-05
    • 2023-06
    • 2023-07
    • 2023-09
    • 2023-10
    • 2023-11
    • 2023-12
    • 2024-01
    • 2024-02
    • 2024-03
    • 2024-04
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客