CKEditor插件开发

2012-01-15 17:32:12|?次阅读|上传:wustguangh【已有?条评论】发表评论

关键词:JavaScript, Web, CKEditor|来源:唯设编程网

From: http://www.voofie.com/content/2/ckeditor-plugin-development/ 根据comment有修改
CKeditor API: http://docs.cksource.com/ckeditor_api/index.html
CKEditor 是目前市场上比较灵活的在线WYSIWYG编辑器之一. 它灵活的设计, 开放的API和详细的文档使得用户扩展功能非常容易. 本文尝试勾勒出 CKEditor插件开发的基础,包含了增加按钮,对话框和执行命令.

源代码的结构

在开始之前,感性的认知一下CKEditor源码的组织形式是很有用的. CKEditor固有的一些文件被组织到ckeditor\_source目录里. 核心的功能,诸如DOM元素操作,事件处理,初始化脚本和一些环境设置被包含在ckeditor\_sourcecore文件夹内. 而其它的一些功能, 比如格式化,拷贝和粘贴, 图片和链接, 都被实现为插件形式放在ckeditor\_sourceplugins文件夹内. 每个文件夹表示一个插件. 并且在每个文件夹内, 有一个plugin.js的文件包含了该插件需要用到的代码.
你可以看到源代码被组织成不同的文件. 为了减少HTTP请求, CKEditor把不同的文件压缩并打包到ckeditor.js和ckeditor_basic.js里, 这种方式是运行编辑器的默认方式. 在开发的过程中, 你会希望通过ckedtior_source.js来代替ckeditor.js的执行.
现在, 创建ckeditor\_sourcepluginsfootnote目录,并在目录里创建plugin.js文件.

配置插件

为了开始开发你的插件, 你需要首先注册你的插件,这样CKEditor才能载入它. 在ckeditor/config.js里,增加:
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
            });
    }
});
发表评论0条 】
网友评论(共?条评论)..
CKEditor插件开发