手把手教你 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 相关文章推荐
线路分流自动跳转代码;希望对大家有用!
Dec 02 Javascript
js页面跳转的常用方法整理
Oct 18 Javascript
jquery实现的鼠标拖动排序Li或Table
May 04 Javascript
jquery使用正则表达式验证email地址的方法
Jan 22 Javascript
jQuery检查事件是否触发的方法
Jun 26 Javascript
jquery实现选中单选按钮下拉伸缩效果
Aug 06 Javascript
20分钟打造属于你的Bootstrap站点
Jul 27 Javascript
ZeroClipboard.js使用一个flash复制多个文本框
Jun 19 Javascript
使用vue的v-for生成table并给table加上序号的实例代码
Oct 27 Javascript
jQuery实现表单动态加减、ajax表单提交功能
Jun 08 jQuery
解决三元运算符 报错“SyntaxError: can''t assign to conditional expression”
Feb 12 Javascript
如何利用JavaScript实现二叉搜索树
Apr 02 Javascript
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
php求数组全排列,元素所有组合的方法
2016/05/05 PHP
详解php中 === 的使用
2016/10/24 PHP
浅析PHP反序列化中过滤函数使用不当导致的对象注入问题
2020/02/15 PHP
Extjs 继承Ext.data.Store不起作用原因分析及解决
2013/04/15 Javascript
鼠标移动到图片名上,显示图片的简单实例
2013/07/14 Javascript
如何在指定的地方插入html内容和文本内容
2013/12/23 Javascript
使用POST方式弹出窗口的两种方法示例介绍
2014/01/29 Javascript
jquery重复提交请求的原因浅析
2014/05/23 Javascript
jQuery实现判断滚动条到底部
2015/06/23 Javascript
JS实现的仿淘宝交易倒计时效果
2015/11/27 Javascript
Angular在一个页面中使用两个ng-app的方法
2017/02/20 Javascript
移动端触屏幻灯片图片切换插件idangerous swiper.js
2017/04/10 Javascript
vue.js 初体验之Chrome 插件开发实录
2017/05/13 Javascript
vue-cli脚手架-bulid下的配置文件
2018/03/27 Javascript
vue router总结 $router和$route及router与 router与route区别
2019/07/05 Javascript
vue自定义指令实现仅支持输入数字和浮点型的示例
2019/10/30 Javascript
JavaScript通如何过RGraph实现动态仪表盘
2020/10/15 Javascript
[01:11:35]Liquid vs LGD 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python实现自动发送邮件
2018/06/20 Python
Python从文件中读取数据的方法讲解
2019/02/14 Python
Keras使用tensorboard显示训练过程的实例
2020/02/15 Python
Keras: model实现固定部分layer,训练部分layer操作
2020/06/28 Python
Python文件夹批处理操作代码实例
2020/07/21 Python
Python random模块的使用示例
2020/10/10 Python
Python django框架 web端视频加密的实例详解
2020/11/20 Python
用HTML5的canvas实现一个炫酷时钟效果
2016/05/20 HTML / CSS
HTML5自定义元素播放焦点图动画的实现
2019/09/25 HTML / CSS
韩国CJ食品专卖网:CJonmart
2016/09/11 全球购物
大学生蛋糕店创业计划书
2014/01/13 职场文书
如何写好优秀的创业计划书
2014/01/30 职场文书
《生命 生命》教学反思
2014/04/19 职场文书
2014年学习厉行节约反对浪费思想汇报
2014/09/10 职场文书
邀请书格式范文
2015/02/02 职场文书
新手入门Mysql--sql执行过程
2021/06/20 MySQL
8个JS的reduce使用实例和reduce操作方式
2021/10/05 Javascript
Three.js实现雪糕地球的使用示例详解
2022/07/07 Javascript