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 }); } });