资源描述：
《ckeditor插件开发》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。
1、CKEditor插件开发星期二7/27/2010发布在Tutorial
2、评论From:http://www.voofie.com/content/2/ckeditor-plugin-development/根据comment有修改CKeditorAPI:http://docs.cksource.com/ckeditor_api/index.htmlCKEditor是目前市场上比较灵活的在线WYSIWYG编辑器之一.它灵活的设计,开放的API和详细的文档使得用户扩展功能非常容易.本文尝试勾勒出CKEditor插件开发的
3、基础，包含了增加按钮，对话框和执行命令.源代码的结构在开始之前，感性的认知一下CKEditor源码的组织形式是很有用的.CKEditor固有的一些文件被组织到ckeditor_source目录里.核心的功能，诸如DOM元素操作，事件处理，初始化脚本和一些环境设置被包含在ckeditor_sourcecore文件夹内.而其它的一些功能,比如格式化，拷贝和粘贴,图片和链接,都被实现为插件形式放在ckeditor_sourceplugins文件夹内.每个文件夹表示一个插件.并且在每个文件夹内,有一个plugin.
4、js的文件包含了该插件需要用到的代码.你可以看到源代码被组织成不同的文件.为了减少HTTP请求,CKEditor把不同的文件压缩并打包到ckeditor.js和ckeditor_basic.js里,这种方式是运行编辑器的默认方式.在开发的过程中,你会希望通过ckedtior_source.js来代替ckeditor.js的执行.现在,创建ckeditor_sourcepluginsfootnote目录，并在目录里创建plugin.js文件.配置插件为了开始开发你的插件,你需要首先注册你的插件，这样CKEdito
5、r才能载入它.在ckeditor/config.js里，增加:config.extraPlugins='footnote';此配置将会告诉编辑器在footnote目录下载入plugin.js.基本的plugin.js结构如下:CKEDITOR.plugins.add('footnote',{ init:function(editor) { //plugincodegoeshere }});按钮CKEditor中主要的功能的实现基本都是通过命令的形式.命令由事件，函数调用或者点击某个工具栏的按钮触发.下列代
6、码增加了一个’Footnote’的按钮和‘footnote’的命令.CKEDITOR.plugins.add('footnote',{ init:function(editor) { varpluginName='footnote'; CKEDITOR.dialog.add(pluginName,this.path+'dialogs/footnote.js'); editor.addCommand(pluginName,newCKEDITOR.dialogCommand(pluginName))
7、; editor.ui.addButton('Footnote', { label:'FootnoteorCitation', command:pluginName }); }});editor.ui.addButton函数声明包含了两个参数,按钮名字和按钮定义.在按钮定义中可能的属性还包含:·label:当鼠标位于按钮之上时所出现的文字提示·className:按钮的css类名.默认为:‘cke_button_’+命令名称·click:当点击按钮后所调用的函数
8、.默认为:执行由命令键值指定的命令.·command:将在按钮点击之后执行的命令上述代码利用了CKEDTIOR.dialogCommand，该函数将在下面的对话章节中介绍.在添加了一个按钮后，你需要把‘Footnote’增加到config.js的工具栏的定义中,把该按钮放到工具栏的合适的位置.之后，你就能看到一个空的按钮出现在工具栏里.按钮图片最简单的增加按钮图片的办法是利用属性icon.代码如下:CKEDITOR.plugins.add('myplugin',{ init:function(editor) {
9、 //plugincodegoeshere editor.ui.addButton('myplugin', { label:'myplugin', command:FCKCommand_myplugin, icon:CKEDITOR.plugins.getPath('myplugin
