[转载声明] 转载时必须标注:本文来源于铁木箱子的博客http://www.mzone.cc
[本文地址] 本文永久地址是:
http://www.mzone.cc/article/288.html
CKEditor是一个非常优秀的在线编辑器,它的前身就是FCKEditor,CKEditor据官方说是重写了内核的,但功能和性能比FCKEditor更为强大和优越。记得07年的时候第一次接触FCKEditor,那时候花了一天时间研究如何在它基础上增加一个自定义插件,可以参考这里http://j2ee.blog.sohu.com/36813753.html,但过程比较复杂和麻烦。其实CKEditor提供了非常方便的可扩展的插件体系,用户通过它的扩展插件体系就可以非常方便的增加自定义插件,我这里简单的给出一个完整的插件示范。
先到http://ckeditor.com/这里下载最新版本的CKEditor,我下载的是3.3.1版,大概有2M左右,包含了全部源码和测试用例。下载完毕后,解压到硬盘,假设CKEditor解压后的目录是${ckeditor},下面提到的都是用这个进行替代。下面就开始一步步制作属于我们自己的插件了。
一、创建插件目录结构
1、进入到${ckeditor}\plugins目录下,创建目录helloworld,这个目录名称就是我们的插件名称
2、在helloworld目录下分别建立三个目录:dialogs、images、lang
二、编写插件文件
每个插件都会有一个plugin.js的插件文件存在于插件目录的根目录下,一般使用CKEditor提供的API来进行插件的动态增加。首先,我们在helloworld目录下建立plugin.js文件,使用utf-8存储,该文件的内容如下:
/**
* Title:CKEditor插件示范
* Author:铁木箱子(http://www.mzone.cc)
* Date:2010-08-02
*/
CKEDITOR.plugins.add('helloworld', {
lang:['zh-cn','en'],
requires: ['dialog'],
init: function(a){
var b = a.addCommand('helloworld', new CKEDITOR.dialogCommand('helloworld'));
a.ui.addButton('helloworld', {
label: a.lang.tbTip,
command: 'helloworld',
icon: this.path + 'images/hello.png'
});
CKEDITOR.dialog.add('helloworld', this.path + 'dialogs/helloworld.js');
}
});
三、插件的对话框
我们在上面的插件文件中写了一个requires: ['dialog'],表示当点击工具栏上的插件图标时会调用一个对话框来进行处理。我们先在helloworld\dialogs目录下建立一个helloworld.js文件,使用utf-8保存,内容如下:
/**
* Title:CKEditor在线编辑器的代码插入插件
* Author:铁木箱子(http://www.mzone.cc)
* Date:2010-07-21
*/
CKEDITOR.dialog.add('helloworld', function(editor) {
var _escape = function(value){
return value;
};
return {
title: editor.lang.dlgTitle,
resizable: CKEDITOR.DIALOG_RESIZE_BOTH,
minWidth: 360,
minHeight: 150,
contents: [{
id: 'cb',
name: 'cb',
label: 'cb',
title: 'cb',
elements: [{
type: 'textarea',
required: true,
label: editor.lang.mytxt,
style: 'width:350px;height:100px',
rows: 6,
id: 'mytxt',
'default': 'Hello World'
}]
}],
onOk: function(){
var mytxt = this.getValueOf('cb', 'mytxt');
editor.insertHtml(mytxt);
},
onLoad: function(){
}
};
});
四、插件的语言文件支持
CKEditor本身就是支持i18n的,因此我们可以为插件定义多种语言,这样可以适应更多的场合。进入helloworld\lang目录,在这个目录下建立en.js和zh-cn.js两个文件,分别用来支持中文和英文,内容分别如下:
/**
* 支持英文的语言包(文件名称en.js),第一个参数是插件名称
*/
CKEDITOR.plugins.setLang('helloworld', 'en', {
tbTip : 'Hello World Plugin Demo',
mytxt : 'Text',
dlgTitle : 'Hello World Plugin Demo(Powered By mzone.cc)'
});
/**
* 支持英文的语言包(文件名称zh-cn.js),第一个参数是插件名称
*/
CKEDITOR.plugins.setLang('helloworld', 'zh-cn', {
tbTip : 'Hello World插件示范',
mytxt : '文本',
dlgTitle : 'Hello World 插件示范(Powered By mzone.cc)'
});
这里定义的语言都是我们在插件中使用到的变量,一般在插件文件中的使用是editor.lang.propName,其中editor是当前的编辑器实体变量,插件一般都会传递的,propName是我们在语言文件中定义的属性名称,比如这里的tbTip等。
五、插件的图片指定
我们其实在第二步编写插件文件中中已经指定了插件的图片文件:icon: this.path + ‘images/hello.png’。这里的icon指的就是在编辑器工具栏上显示的图标,我们这里找一个16×16大小的png图片,命名为hello.png,然后放到helloworld\images目录下即可。
六、演示验证插件
完成上面5个步骤后,插件基本上就已经完成了。为了能够使插件可以出现在编辑器的工具栏中,我们还需要做如下配置:
1、打开${ckeditor}\config.js文件,修改内容为如下:
CKEDITOR.editorConfig = function( config )
{
// Define changes to default configuration here. For example:
// config.language = 'fr';
// config.uiColor = '#AADC6E';
config.language = 'zh-cn';
config.toolbar_MyBasic = [
[ 'Bold', 'Italic', '-', 'NumberedList','BulletedList' ],
['-', 'Link', 'Unlink', 'Image', 'helloworld' ]
];
config.extraPlugins += (config.extraPlugins ? ',helloworld' : 'helloworld');
};
其中config.extraPlugins这行是关键,表明这个是我们编写的额外插件,需要集成到CKEditor中去。这个仅仅是注册而已,如果需要显示在工具栏中,还要定义一个toolbar,比如我们这里定义了一个MyBasic的toolbar,并且只选取了CKEditor中最常用的几个工具,然后最后我们增加了helloworld的插件,这样我们就把刚才编写的插件注册到MyBasic的toolbar中了。
2、写一个demo.html文件进行测试
我们在${ckeditor}根目录下建立一个demo.html文件来测试下我们刚写的插件是否有效,内容如下:
<html>
<head>
<title>CKEditor插件编写示例-Powered By mzone.cc</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="ckeditor.js"></script>
</head>
<body>
<textarea cols="80" id="editor1" name="editor1" rows="10">This is the content!</textarea>
<script>
CKEDITOR.replace("editor1", {
toolbar : 'MyBasic',
height : 300,
width : 800
});
</script>
</body>
</html>
然后在浏览器中打开demo.html文件,就可以看到在编辑器的工具栏中最后一个就是我们刚写的插件了,如下图所示:
七、插件包下载和部署
上面演示效果的完整插件包可以从这里下载,将插件包下载后,安装如下方式进行部署:
1、解压插件包,将helloworld目录整个复制到${ckeditor}\plugins目录下;
2、将demo.html文件复制到${ckeditor}根目录下;
3、将第六步中的修改config.js文件内容替换掉${ckeditor}\config.js文件的内容;
4、完成后,在浏览器中运行demo.html文件即可看到效果
相关推荐
setting.xml文件,修改Maven仓库指向至阿里仓
基于java的玉安农副产品销售系统的开题报告
dev-c++ 6.3版本
基于java的项目监管系统开题报告
基于springboot多彩吉安红色旅游网站源码数据库文档.zip
毕业设计&课设_基于 AFLFast 改进能量分配策略的毕业设计项目,含 Mix Schedule策略设计及测试结果分析.zip
基于springboot办公用品管理系统源码数据库文档.zip
C++调用qml对象Demo
非常漂亮的类Web界面的Delphi设计54ed7-main.zip
VB SQL车辆管理系统是一款基于Visual Basic(VB)编程语言和SQL数据库开发的综合车辆管理工具。该系统集成了车辆信息管理、驾驶员信息管理、车辆调度、维修记录、数据存储与检索、报告生成以及安全权限管理等多个核心功能模块。 源代码部分提供了详细的开发流程和实现方法,涵盖了从数据库设计、界面设计到事件驱动编程、数据访问技术和错误处理等关键技术点。通过该系统,用户可以方便地录入、查询、修改和删除车辆及驾驶员信息,实现车辆信息的实时更新和跟踪。同时,系统还支持生成各类车辆管理相关的报告,帮助用户更好地掌握车辆运营情况。 系统部分则采用了直观易用的用户界面设计,使得用户能够轻松上手并快速完成车辆管理工作。系统还具备强大的数据处理能力和安全性,通过数据备份和系统升级优化等功能,确保数据的完整性和系统的稳定运行。 总体而言,VB SQL车辆管理系统是一款功能全面、易于操作且安全可靠的车辆管理工具,适用于企业和个人进行日常车辆运营和管理。无论是车辆信息的录入、查询还是报告生成,该系统都能够提供高效、便捷的服务,是车辆管理工作的理想选择。
AutoSAR基础学习资源
基于springboot英语学习平台源码数据库文档.zip
数据集,深度学习,密封数据集,马体态数据集
基于java的数字家庭网站开题报告
podman使用国内源镜像加速器
基于springboot+web的留守儿童网站源码数据库文档.zip
基于springboot的智能宾馆预定系统源码数据库文档.zip
GetQzonehistory-main.zip
环境说明:开发语言:Java 框架:springboot JDK版本:JDK1.8 服务器:tomcat7 数据库:mysql 5.7 数据库工具:Navicat 开发软件:eclipse/myeclipse/idea Maven包:Maven 浏览器:谷歌浏览器。 项目经过测试均可完美运行
内容概要:本文档详细介绍了QST公司生产的QMI8A01型号的6轴惯性测量单元的数据表及性能参数。主要内容包括设备特性、操作模式、接口标准(SPI、I2C与I3C),以及各种运动检测原理和技术规格。文中还提到了设备的工作温度范围宽广,内置的大容量FIFO可用于缓冲传感器数据,减少系统功耗。此外,对于器件的安装焊接指导亦有详细介绍。 适合人群:电子工程技术人员、嵌入式开发人员、硬件设计师等。 使用场景及目标:适用于需要精准测量物体空间位置变化的应用场合,如消费电子产品、智能穿戴设备、工业自动化等领域。帮助工程师快速掌握该款IMU的技术要点和应用场景。 其他说明:文档提供了详细的电气连接图表、封装尺寸图解等资料,方便用户进行电路板的设计制作。同时针对特定应用提出了一些优化建议。