CKEditor插件开发
From: www.voofie/content/2/ckeditor-plugin-development/ 根据comment有修改
CKeditor API: docs.cksource/ckeditor_api/index.html
CKeditor API: docs.cksource/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
}
});
{
//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');
{
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('Footnote',
{
label: 'Footnote or Citation',
command: pluginName
});
}
});
editor.ui.addButton函数声明包含了两个参数, 按钮名字和按钮定义. 在按钮定义中可能的属性还包含:
∙ label: 当鼠标位于按钮之上时所出现的文字提示
∙ className: 按钮的css类名. 默认为: ‘cke_button_’ + 命令名称
∙ click: 当点击按钮后所调用的函数. 默认为: 执行由 命令键值 指定的命令.
∙ command: 将在按钮点击之后执行的命令
上述代码利用了CKEDTIOR.dialogCommand，该函数将在下面的对话章节中介绍. 在添加了一个按钮后，你需要把‘Footnote’增加到config.js的工具栏的定义中, 把该按钮放到工具栏的合适的位置. 之后，你就能看到一个空的按钮出现在工具栏里.
上述代码利用了CKEDTIOR.dialogCommand，该函数将在下面的对话章节中介绍. 在添加了一个按钮后，你需要把‘Footnote’增加到config.js的工具栏的定义中, 把该按钮放到工具栏的合适的位置. 之后，你就能看到一个空的按钮出现在工具栏里.
按钮图片
最简单的增加按钮图片的办法是利用属性icon. 代码如下:
CKEDITOR.plugins.add('myplugin',
{
{
init: function(editor)
{
//plugin code goes here
editor.ui.addButton('myplugin',
{
label: 'myplugin',
command: FCKCommand_myplugin,
icon: CKEDITOR.plugins.getPath('myplugin') + 'myplugin.png'
});
}
});
{
//plugin code goes here
editor.ui.addButton('myplugin',
{
label: 'myplugin',
command: FCKCommand_myplugin,
icon: CKEDITOR.plugins.getPath('myplugin') + 'myplugin.png'
});
}
});
命令
CKEditor以命令的方式提供了大部分的功能. 命令和函数之间的不同是 命令是有“ON”, “OFF“和未启用状态的.
定义一个命令
editor.addCommand函数声明了两个参数, 命令名字和命令的对象定义. 可能的命令定义的属性包含:
∙ exec: 最小形式编辑器在线使用, 定义的对象拥有一个exec方法, 该方法会在命令执行时执行.
∙ modes: 命令能被执行的模式. 默认为: {wysiwyg:1} 有效的模式是: wysiwyg, source
∙ editorFocus: 在执行命令时，是否给予编辑器焦点. 默认: true
∙ state: 命令的状态. 默认: CKEDITOR.TRISTATE_OFF
∙ canUndo: 该命令是否会和redo/undo系统挂钩
∙ async: 在异步功能，例如ajax中被用到. 在执行完命令后, afterCommandExec事件将不会被自动触发. 它将期望程序员能够手工触发该事件.
执行命令
触发命令是很简单的, 通过
editor.execCommand(commandName);
命令状态
命令有三个状态: ON, OFF和DISABLED. 状态能够通过setState进行设置，例如:
editor.getCommand(commandName).setState(state);
状态值将会是: CKEDITOR.TRISTATE_ON, CKEDITOR.TRISTATE_OFF, CKEDITOR.TRISTATE_DISABLED 中的一个.
当设置为未启用的时候, 按钮将会表现为灰, 并且通过execCommand执行的命令将无效. 当设置为on的时候, 按钮就会被高亮. 当命令的状态改变的时候, 命令将会触发一个’state’事件.
对话框
对话框是一些插件的核心. 为了使用该对话框, 他们必须首先在plugin.js中注册, 包括定义, 通
过调用CKEDITOR.dialog.add如下:
CKEDITOR.dialog.add(pluginName, this.path + 'dialogs/pluginName.js');
之后，如果你想通过点击一个按钮触发这个对话框, 你可以通过使用CKEDITOR.dialogCommand来简单的完成这项工作.
editor.addCommand(pluginName, new CKEDITOR.dialogCommand(pluginName));
对话框定义
按约定，有关对话框的代码将会被放到dialogs/.js中. 和按钮和命令类似, 对话框也是通过定义一些属性和方法来定义的. 下面的代码展示了一个标准的.js的模板:
( function(){
var exampleDialog = function(editor){
var exampleDialog = function(editor){
return {
title : /* title in string*/,
minWidth : /*number of pixels*/,
minHeight : /*number of pixels*/,
buttons: /*array of button definitions*/,
onOk: /*function*/ ,
onLoad: /*function*/,
onShow: /*function*/,
onHide: /*function*/,
onCancel: /*function*/,
resizable: /* none,width,height or both */,
contents: /*content definition, basically the UI of the dialog*/
}
}
title : /* title in string*/,
minWidth : /*number of pixels*/,
minHeight : /*number of pixels*/,
buttons: /*array of button definitions*/,
onOk: /*function*/ ,
onLoad: /*function*/,
onShow: /*function*/,
onHide: /*function*/,
onCancel: /*function*/,
resizable: /* none,width,height or both */,
contents: /*content definition, basically the UI of the dialog*/
}
}
CKEDITOR.dialog.add('insertHTML', function(editor) {
return exampleDialog(editor);
});
})();
return exampleDialog(editor);
});
})();
定义里有以下一些属性／方法:
Buttons
该属性定义了对话框底部可用的按钮. 它是一个 CKEDITOR.dialog.buttonDefinition对象的数组. 默认的值是 [ CKEDITOR.dialog.okButton, CKEDITOR.dialog.cancelButton ]. 为了增加你自己的按钮, 你须要写下按钮的定义，并把它加到该数组里. 例如:
buttons:[{
type:'button',
type:'button',
id:'someButtonID', /* note: this is not the CSS ID attribute! */
label: 'Button',
onClick: function(){
//action on clicking the button
}
},CKEDITOR.dialog.okButton, CKEDITOR.dialog.cancelButton],
label: 'Button',
onClick: function(){
//action on clicking the button
}
},CKEDITOR.dialog.okButton, CKEDITOR.dialog.cancelButton],
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论