本文实例讲述了CKEDITOR 4扩展插件制作。分享给大家供大家参考,具体如下:
今天让我们来探索一下ckeditor的扩展功能,换句话说就是自定义按钮,以及点击按钮之后实现的功能。
要实现自定义按钮,我们要做几个事情:
<李> 1,准备一个图标,最好是16 * 16大小的png格式图片,你没有的话,姜哥帮你准备了一张
2,编辑<代码> plugin.js 文件,填入以下内容,特别要注意里面的名字前后保持一致,后期运行有问题,多半是名字写错了:
(函数(){//第1部分:按下自定义按钮时执行的代码
var={
执行:函数(编辑){
警报(“这custome按钮!”);
}
},//第二节:创建自定义按钮,绑定方法
b=癿yplug”;//注意myplug名字
CKEDITOR.plugins.add (b, {
init函数(编辑){
CKEDITOR.dialog。添加(“myplugDialog”,这个。路径+ '对话框/myplug.js ');//注意myplug名字
编辑器。addCommand (myplug,新的CKEDITOR.dialogCommand (' myplugDialog '));//注意myplug名字//注意myplug名字和图片路径
editor.ui.addButton (myplug, {
标签:“打开我的插件”,
图标:这个。路径+“myplug.png”,
b命令:
});
}
});
}) ();
之前
3,配置config.js中的工具栏,将自定义插件显示出来:
CKEDITOR。editorConfig=函数(配置){
config.extraPlugins=" myplug”;//增加了我们的自定义插件
配置。工具栏=巴暾?
配置。toolbar_Full=(
{名称:“custome_plugin”项目:[' myplug ']},//将自定义插件加入工具栏
{名称:“插入”,项目:(“上传”、“专辑”,“-”,“表”)},
{名称:“剪贴板”,项目:[‘切’,‘复制’,‘粘贴’,‘PasteText’,‘PasteFromWord’,‘-’,“撤销”,“重做”)},
{名称:“basicstyles”,项目:“大胆”,“斜体”,“强调”,“罢工”,“下标”、“上标”)},
{名称:“段”,项目:[‘NumberedList’,‘BulletedList’,‘-’,‘-’,‘引用’,
' - ',' JustifyLeft’,‘JustifyCenter’,‘JustifyRight’,‘JustifyBlock]},
{名称:“颜色”,项目:[‘输入TextColor’,‘背景’]},
{名称:“文档”,项目:['源']},
];
};
之前
在这里我们只加了两行,一行是<代码> config.extraPlugins=癿yplug”; 这个向ckeditor注册了我们的自定义插件,告诉ckeditor还有我们的这个<代码> myplug 这么个东西,另一行是<代码>{名称:“custome_plugin”项目:[' myplug ']}>
保存之后,看一下运行效果,图标出来了,可是点击以后一闪而过,那是因为我们还没有开发对应的对话框<代码> 代码:
<强>注意:如果大家这一步失败了,可以尝试从两个方面排查:
<强>①,前面我一再强调的,名字有没有弄错;
②,也许是文件编码的问题,尝试把所有的中文都删掉,换成英文试试。
4,开发<代码>对话框/myplug.js>
在新建一个叫<代码> myplug.js> plugin.js 文件中的这一行是对应的:
CKEDITOR.dialog。添加(“myplugDialog”,这个。路径+ '对话框/myplug.js ');//注意myplug名字
之前
在那个文件中,其实指定了我们对话框文件的目录和文件名,理论上是可以随意的,但是为了容易管理,墙裂建议大家搞成一样的,不要给自己制造麻烦~来看一下,我们要在
