CKEditor插件开发.docVIP

CKEditor插件开发 星期二 7/27/2010 发布在 Tutorial | 评论 From: /content/2/ckeditor-plugin-development/ 根据comment有修改CKeditor API: /ckeditor_api/index.html CKEditor 是目前市场上比较灵活的在线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/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? ? ? ? ? ? });? ? }}); editor.ui.addButton函数声明包含了两个参数, 按钮名字和按钮定义. 在按钮定义中可能的属性还包含: label: 当鼠标位于按钮之上时所出现的文字提示 className: 按钮的css类名. 默认为: ‘cke_button_’ + 命令名称 click: 当点击按钮后所调用的函数. 默认为: 执行由 命令键值 指定的命令. command: 将在按钮点击之后执行的命令上述代码利用了CKEDTIOR.dialogCommand，该函数将在下面的对话章节中介绍. 在添加了一个按钮后，你需要把‘Footnote’增加到config.js的工具栏的定义中, 把该按钮放到工具栏的合适的位置. 之后，你就能看到一个空的按钮出现在工具栏里. 按钮图片 最简单的增加按钮图片的办法是利用属性icon. 代码如下: CKEDITOR.plugins.add(myplugin,{? ? init: function(editor)? ? {? ? ? ? //plugin code goes here? ? ? ? editor.