手把手教你 CKEDITOR 4 扩展插件制作
本文实例讲述了CKEDITOR 4 扩展插件制作。分享给大家供大家参考,具体如下:
今天让我们来探索一下ckeditor的扩展功能,换句话说就是自定义按钮,以及点击按钮之后实现的功能。
要实现自定义按钮,我们要做几个事情:
- 1、准备一个图标,最好是16*16大小的png格式图片,你没有的话,姜哥帮你准备了一张。
- 2、在
plugins
目录下建立我们和自定义插件同名的目录,并且在里面建立一个叫plugin.js
的文件。 - 3、在我们自己的插件目录中,建立一个dialogs目录,并且在里面新建一个与我们插件同名的js文件,实现插件的功能。
动手!
1、建立相应的文件夹和文件,姜哥在ckeditor/plugins/下新建了一个myplug
目录,将来我的插件就叫myplug
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
代码:
注意:如果大家这一步失败了,可以尝试从两个方面排查:
①、前面我一再强调的,名字有没有弄错;
②、也许是文件编码的问题,尝试把所有的中文都删掉,换成英文试试。
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"" alt="这里写图片描述" src="/UploadFiles/2021-04-02/201906181058469.png">用我标红的两个选项试试看,一般都是可以的,重新保存之后,再次运行:
点击我们的插件后,出来一个对话框,填入我的名字,姜哥,再按确定。
我们填入的内容就被插入到当前光标处了!
好了,今天我们学习了ckeditor的自定义插件,以及插件中内容的交互。内容还是比较多的,大家也可能会碰到各种问题,姜哥再这里再唠叨两句,问题一般都是两种原因引起的:
①、名称前后不一致;
②、中文编码格式引起的乱码。完整实例代码点击此处本站下载。
更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript错误与调试技巧总结》、《JavaScript操作XML文件技巧总结》、《JavaScript中json操作技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
下一篇:Typescript 中的 interface 和 type 到底有什么区别详解