CKEditor插件编写

4. 插件编写流程和实例代码

1) 在plugins目录新建文件夹apage，在apage下新建文件：plugin.js 内容如下：

CKEDITOR.plugins.add( ‘apage’,
{
init : function( editor )
{
// Add the link and unlink buttons.
editor.addCommand( ‘apage’, new CKEDITOR.dialogCommand( ‘apage’ ) );
editor.ui.addButton( ‘Page’,
{
//label : editor.lang.link.toolbar,
label : “Page”,

//icon: ‘images/anchor.gif’,
command : ‘apage’
} );
//CKEDITOR.dialog.add( ‘link’, this.path + ‘dialogs/link.js’ );
CKEDITOR.dialog.add( ‘apage’, function( editor )
{
return {
title : ‘文章分页’,
minWidth : 350,
minHeight : 100,
contents : [
{
id : 'tab1',
label : 'First Tab',
title : 'First Tab',
elements :
[
{
id : 'pagetitle',
type : 'text',
label : '请输入下一页文章标题<br />(不输入默认使用当前标题+数字形式)'
}
]
}
],
onOk : function()
{
editor.insertHtml(”[page="+this.getValueOf( 'tab1', 'pagetitle' )+"]“);
}
};
} );
},

requires : [ 'fakeobjects' ]
} );

2）在toolbar中加一项Page，并在配置中声明添加扩展插件 config.extraPlugins = ‘apage’; 有两种方法实现，方法一是直接在config.js中添加，示例本文上面的config.js示例代码； 方法二：在引用CKEditor的地方加配置参数,如：

CKEDITOR.replace( 'editor1',
{
extraPlugins : ‘examenLink’,
toolbar : [
['Undo','Redo','-','Cut','Copy','Paste'],
['ExamenLink','Bold','Italic','Underline',],
['Link','Unlink','Anchor','-','Source'],['Page']
]
});

此时你应该看到编辑器里多了一个空白的按钮了。

解决空白按钮的方法有二：

方法1：修改插件代码，plugin，将icon定义为一个存在的图标。

方法2：让编辑显示Label的文字。需要加在放编辑器的页面里加css（注意：cke_button_apage 的名称与实际保持一致。）
<style type=”text/css”>
.cke_button_apage .cke_icon { display : none !important; }
.cke_button_apage .cke_label { display : inline !important; }
</style>

如果你的分页只需要插入一个分页符，不需要像本文需要填写标题，那更简单，只需要修改插件代码即可。请在红麦软件团队wiki上查看本文提到的所有代码：