欢迎您,零度科技专业海外服务器租用
公司电话: 24小时电话: 

当前位置:首页>网站建设教程>javascript教程

目录导航

CKeditor 插件开发教程

美国KT机房 发布于 2013-03-13   javascriptFCKeditor

javascript教程

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
});
}
});
editor.ui.addButton函数声明包含了两个参数, 按钮名字和按钮定义. 在按钮定义中可能的属性还包含:
label: 当鼠标位于按钮之上时所出现的文字提示
className: 按钮的css类名. 默认为: ‘cke_button_’ + 命令名称
click: 当点击按钮后所调用的函数. 默认为: 执行由 命令键值 指定的命令.
command: 将在按钮点击之后执行的命令
上述代码利用了CKEDTIOR.dialogCommand,该函数将在下面的对话章节中介绍. 在添加了一个按钮后,你需要把‘Footnote’增加到config.js的工具栏的定义中, 把该按钮放到工具栏的合适的位置. 之后,你就能看到一个空的按钮出现在工具栏里.

零度科技原文链接:http://www.ldisp.com/a/javascript/2013/1493.shtml

上一篇:CKeditor在线编辑器 取值和赋值的方法
下一篇:UEditor 修改回车使用br标签

 
了解零度?

零度科技主营全球服务器租用,如果您有服务器租用需求请联系

海外服务器租用

推荐香港、美国、韩国。提供站群服务器、高防服务器租用

海外特价服务器

关注零度特价服务器频道,了解全球特价服务器。

5

业务咨询

    技术服务

      特价活动
        全站搜索
        热门搜索:
        会员
        0通知
        客服
        0特价
        搜索
        TOP
        香港高防服务器,远程桌面,韩国服务器,nginx,反向代理