手把手教你 CKEDITOR 4 扩展插件制作


Posted in Javascript onJune 18, 2019

本文实例讲述了CKEDITOR 4 扩展插件制作。分享给大家供大家参考,具体如下:

今天让我们来探索一下ckeditor的扩展功能,换句话说就是自定义按钮,以及点击按钮之后实现的功能。

要实现自定义按钮,我们要做几个事情:

  • 1、准备一个图标,最好是16*16大小的png格式图片,你没有的话,姜哥帮你准备了一张手把手教你 CKEDITOR 4 扩展插件制作
  • 2、在plugins目录下建立我们和自定义插件同名的目录,并且在里面建立一个叫plugin.js的文件。
  • 3、在我们自己的插件目录中,建立一个dialogs目录,并且在里面新建一个与我们插件同名的js文件,实现插件的功能。

动手!

1、建立相应的文件夹和文件,姜哥在ckeditor/plugins/下新建了一个myplug目录,将来我的插件就叫myplug

手把手教你 CKEDITOR 4 扩展插件制作

2、编辑plugin.js文件,填入以下内容,特别要注意里面的名字前后保持一致,后期运行有问题,多半是名字写错了:

(function(){
 //Section 1 : 按下自定义按钮时执行的代码
 var a= {
  exec:function(editor){
   alert("This a custome button!");
  }
 },
 //Section 2 : 创建自定义按钮、绑定方法
 b='myplug'; //注意myplug名字
 CKEDITOR.plugins.add(b,{
  init:function(editor){
   CKEDITOR.dialog.add('myplugDialog', this.path + 'dialogs/myplug.js'); //注意myplug名字
   editor.addCommand('myplug', new CKEDITOR.dialogCommand('myplugDialog')); //注意myplug名字
   //注意myplug名字 和 图片路径
   editor.ui.addButton('myplug',{
    label:'打开我的插件',
    icon: this.path + 'myplug.png',
    command:b
   });
  }
 });
})();

3、配置config.js中的toolbar,将自定义插件显示出来:

CKEDITOR.editorConfig = function( config ) {
 config.extraPlugins="myplug"; //增加了我们的自定义插件
 config.toolbar = 'Full';
 config.toolbar_Full =
 [
  { name: 'custome_plugin', items : [ 'myplug'] }, //将自定义插件加入toolbar
  { name: 'insert', items : [ 'upload','album','-','Table' ] },
  { name: 'clipboard', items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] },
  { name: 'basicstyles', items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript' ] },
  { name: 'paragraph', items : [ 'NumberedList','BulletedList','-','-','Blockquote',
  '-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock' ] },
  { name: 'colors', items : [ 'TextColor','BGColor' ] },
  { name: 'document', items : [ 'Source' ] },
 ];
};

在这里我们只加了两行,一行是config.extraPlugins="myplug";这个向ckeditor注册了我们的自定义插件,告诉ckeditor还有我们的这个myplug这么个东西;另一行是{ name: 'custome_plugin', items : [ 'myplug'] },用来配置toolbar,让ckeditor将我们的按钮显示出来,注意后面的逗号,不要漏了噢。

保存之后,看一下运行效果,图标出来了,可是点击以后一闪而过,那是因为我们还没有开发对应的dialog代码:

手把手教你 CKEDITOR 4 扩展插件制作

注意:如果大家这一步失败了,可以尝试从两个方面排查:

①、前面我一再强调的,名字有没有弄错;
②、也许是文件编码的问题,尝试把所有的中文都删掉,换成英文试试。

4、开发dialogs/myplug.js,实现业务功能

myplug/dialogs/新建一个叫myplug.js的文件,这个其实和前面一步中,plugin.js文件中的这一行是对应的:

CKEDITOR.dialog.add('myplugDialog', this.path + 'dialogs/myplug.js'); //注意myplug名字

在那个文件中,其实指定了我们dialog文件的目录和文件名,理论上是可以随意的,但是为了容易管理,墙裂建议大家搞成一样的,不要给自己制造麻烦~来看一下,我们要在myplug.js里写什么:

(function () {
  function myplugDialog(editor) {
  return {
   title: 'Who does you want to say hello?', //窗口标题
   minWidth: 300,
   minHeight: 80,
   buttons: [{
    type: 'button',
    id: 'someButtonID',
    label: 'Button',
    onClick: function () {
     alert('This is a custome button');
    }
    //对话框底部的自定义按钮
   },
   CKEDITOR.dialog.okButton, //对话框底部的确定按钮
   CKEDITOR.dialog.cancelButton], //对话框底部的取消按钮
   contents:      //每一个contents在对话框中都是一个tab页
   [
    {
     id: 'user',   //contents的id
     label: 'You name',
     title: 'You name',
     elements:    //定义contents中的内容,我们这里放一个文本框,id是name
     [
      {
       id: 'name',
       type: 'text',
       style: 'width: 50%;',
       label: 'You name',
      }
     ]
    }
   ],
   onLoad: function () {
    //alert('onLoad');
   },
   onShow: function () {
    //alert('onShow');
   },
   onHide: function () {
    //alert('onHide');
   },
   onOk: function () {
    //点击 确定 按钮之后触发的事件
    var name = this.getValueOf( 'user', 'name' );
    //从界面上取值的方法,getValueOf( 'contents的id', '控件的id' )
    editor.insertHtml('<p>' + name + ' : Hello world!' + '</p>');
    //将内容放入到editor
    this.commitContent();
   },
   onCancel: function () {
    //alert('onCancel');
   },
   resizable: CKEDITOR.DIALOG_RESIZE_HEIGHT
  };
 }
 CKEDITOR.dialog.add('myplugDialog', function (editor) {
  return myplugDialog(editor);
 });
})();

在上面这段程序里,我们首先定义了一个myplugDialog,并且给他设置了标题、最小宽度、最小高度,然后又添加了一个tab页,在里面放了一个对话框。在程序的底部,我们把这个对话框注册到ckeditor中去,这样前端点击按钮,才可以调用到这个对话框。

常见错误:

1、名字没有匹配,再次强调一下,这里面myplugDialog千万千万要前后一致,而且,要和plugin.js中的名称一致!

2、中文的问题,如果出现点击没有效果,大家可以首先尝试,将我这段代码中,所有的中文都删掉试试。或者用另外的方法,转换一下编码格式,在Notepad++中,可以这样:

手把手教你 CKEDITOR 4 扩展插件制作

用我标红的两个选项试试看,一般都是可以的,重新保存之后,再次运行:

手把手教你 CKEDITOR 4 扩展插件制作

点击我们的插件后,出来一个对话框,填入我的名字,姜哥,再按确定。

手把手教你 CKEDITOR 4 扩展插件制作

我们填入的内容就被插入到当前光标处了!

好了,今天我们学习了ckeditor的自定义插件,以及插件中内容的交互。内容还是比较多的,大家也可能会碰到各种问题,姜哥再这里再唠叨两句,问题一般都是两种原因引起的:

①、名称前后不一致;
②、中文编码格式引起的乱码。

完整实例代码点击此处本站下载

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
浏览器解析js生成的html出现样式问题的解决方法
Apr 16 Javascript
使图片旋转的3种解决方案
Nov 21 Javascript
JavaScript 实现简单的倒计时弹窗DEMO附图
Mar 05 Javascript
一个html5播放视频的video控件只支持android的默认格式mp4和3gp
May 08 Javascript
浅谈Vue.nextTick 的实现方法
Oct 25 Javascript
详解vue中组件参数
Jul 09 Javascript
一步一步的了解webpack4的splitChunk插件(小结)
Sep 17 Javascript
TypeScript中的方法重载详解
Apr 12 Javascript
了解javascript中变量及函数的提升
May 27 Javascript
快速了解Vue父子组件传值以及父调子方法、子调父方法
Jul 15 Javascript
google广告之另类js调用实现代码
Aug 22 Javascript
vite2.0+vue3移动端项目实战详解
Mar 03 Vue.js
Typescript 中的 interface 和 type 到底有什么区别详解
Jun 18 #Javascript
使用js在layui中实现上传图片压缩
Jun 18 #Javascript
jquery中为什么能用$操作
Jun 18 #jQuery
详解Vue3.0 前的 TypeScript 最佳入门实践
Jun 18 #Javascript
利用js-cookie实现前端设置缓存数据定时失效
Jun 18 #Javascript
vue中利用Promise封装jsonp并调取数据
Jun 18 #Javascript
实用Javascript调试技巧分享(小结)
Jun 18 #Javascript
You might like
咖啡风味 世界咖啡主要分布分布 咖啡的生长要求
2021/03/06 新手入门
PHP4(windows版本)中的COM函数
2006/10/09 PHP
浅析php中json_encode()和json_decode()
2014/05/25 PHP
CI框架常用经典操作类总结(路由,伪静态,分页,session,验证码等)
2016/11/21 PHP
php使用yield对性能提升的测试实例分析
2019/09/19 PHP
图片连续滚动代码[兼容IE/firefox]
2009/06/11 Javascript
JavaScript 事件系统
2010/07/22 Javascript
用JS判断IE版本的代码 超管用!
2011/08/09 Javascript
jQuery实现切换页面布局使用介绍
2011/10/09 Javascript
javascript 进阶篇3 Ajax 、JSON、 Prototype介绍
2012/03/14 Javascript
JS delegate与live浅析
2013/12/21 Javascript
收集json解析的四种方法分享
2014/01/17 Javascript
JS使用replace()方法和正则表达式进行字符串的搜索与替换实例
2014/04/10 Javascript
jQuery中阻止冒泡事件的方法介绍
2014/04/12 Javascript
Js实现手机发送验证码时按钮延迟操作
2014/06/20 Javascript
JS HTML5实现拖拽移动列表效果
2020/08/27 Javascript
总结Node.js中的一些错误类型
2016/08/15 Javascript
jQuery的中 is(':visible') 解析及用法(必看)
2017/02/12 Javascript
Vue.js父与子组件之间传参示例
2017/02/28 Javascript
JSON与js对象序列化实例详解
2017/03/16 Javascript
tween.js缓动补间动画算法示例
2018/02/13 Javascript
AngularJS自定义过滤器用法经典实例总结
2018/05/17 Javascript
vue-awesome-swiper 基于vue实现h5滑动翻页效果【推荐】
2018/11/08 Javascript
layui实现多图片上传并限制上传的图片数量
2019/09/26 Javascript
Vue中常用rules校验规则(实例代码)
2019/11/14 Javascript
Vant+postcss-pxtorem 实现浏览器适配功能
2021/02/05 Javascript
[47:21]Liquid vs TNC Supermajor 胜者组 BO3 第一场 6.4
2018/06/05 DOTA
python 把文件中的每一行以数组的元素放入数组中的方法
2018/04/29 Python
python 画图 图例自由定义方式
2020/04/17 Python
CSS3中的弹性布局em运用入门详解 1em等于多少像素
2021/02/08 HTML / CSS
英国羊绒服装购物网站:Pure Collection
2018/10/22 全球购物
加拿大拼图大师:Puzzle Master
2020/12/28 全球购物
四查四看剖析材料
2014/02/14 职场文书
银行柜员与客户起冲突检讨书
2014/09/27 职场文书
2016公司新年问候语
2015/11/11 职场文书
《陶罐和铁罐》教学反思
2016/03/03 职场文书