Ckeditor插件开发(3.x)

http://my.oschina.net/luyao/blog/105056

 

 

CKE ditor 是目前市场上比较灵活的在线 WYSIWYG 编辑器之一 . 它灵活的设计 , 开放的 API 和详细的文档使得用户扩展功能非常容易. 本文尝试勾勒出 CKEditor 插件开发的基础，包含了增加按钮，对话框和执行命令 .

源代码结构

在开始之前，感性的认知一下CKEditor源码的组织形式是很有用的. CKEditor固有的一些文件被组织到ckeditor\_source目录里. 核心的功能，诸如DOM元素操作，事件处理，初始化脚本和一些环境设置被包含在ckeditor\_source\core文件夹内. 而其它的一些功能, 比如格式化，拷贝和粘贴, 图片和链接, 都被实现为插件形式放在ckeditor\_source\plugins文件夹内. 每个文件夹表示一个插件. 并且在每个文件夹内, 有一个plugin.js的文件包含了该插件需要用到的代码.

你可以看到源代码被组织成不同的文件. 为了减少HTTP请求, CKEditor把不同的文件压缩并打包到ckeditor.js和ckeditor_basic.js里, 这种方式是运行编辑器的默认方式. 在开发的过程中, 你会希望通过ckedtior_source.js来代替ckeditor.js的执行.

现在, 创建ckeditor\_source\plugins\footnote目录，并在目录里创建plugin.js文件.

 

插件配置

为了开始开发你的插件 , 你需要首先注册你的插件，这样 CKEditor 才能载入它 . 在 ckeditor\_source\core\config.js里，修改CKEDITOR.config的属性extraPlugins为 'footnote';

此配置将会告诉编辑器在footnote目录下载入plugin.js. 基本的plugin.js结构如下:

CKEDITOR.plugins.add('footnote',
{
    init: function(editor)
    {
        //plugin code goes here
    }
});

 

按钮

CKEditor中主要的功能的实现基本都是通过命令的形式. 命令由事件，函数调用或者点击某个工具栏的按钮触发. 下列代码增加了一个’Footnote’的按钮和‘footnote’的命令.

 

CKEDITOR.plugins.add('footnote',
{
    init: function(editor)
    {
        var pluginName = 'footnote';
        CKEDITOR.dialog.add(pluginName, this.path + 'dialogs/footnote.js');
        editor.addCommand(pluginName, new CKEDITOR.dialogCommand(pluginName));
        editor.ui.addButton('Footnote',
            {
                label: 'Footnote or Citation',
                command: pluginName
            });
    }
});

 

editor.ui.addButton函数声明包含了两个参数, 按钮名字和按钮定义. 在按钮定义中可能的属性还包含:

· label: 当鼠标位于按钮之上时所出现的文字提示

· className: 按钮的css类名. 默认为: ‘cke_button_’ + 命令名称

· click: 当点击按钮后所调用的函数. 默认为: 执行由 命令键值 指定的命令.

command: 将在按钮点击之后执行的命令 
上述代码利用了 CKEDTIOR.dialogCommand ，该函数将在下面的对话章节中介绍 . 在添加了一个按钮后，你需要把 ‘Footnote’ 增加到 config.js 的工具栏的定义中 , 把该按钮放到工具栏的合适的位置 . 之后，你就能看到一个空的按钮出现在工具栏里 .