CKEDITOR二次开发之插件开发方法

在开始之前，先聊聊CKEditor源码的组织形式，对于理解后续的插件开发会很有帮助。CKEditor的源文件都放在ckeditor_source目录下。核心功能，比如DOM元素操作、事件处理、初始化脚本和一些环境设置，集中在ckeditor_source\core文件夹里。而其他功能，比如格式化、复制粘贴、图片和链接，都是以插件形式实现的，放在ckeditor_source\plugins文件夹内。每个插件都有一个独立的文件夹，里面有个plugin.js文件，存放了该插件的核心代码。

你可以看到，源代码被分散在不同的文件中。为了减少HTTP请求，CKEditor最终把这些文件压缩打包成ckeditor.js和ckeditor_basic.js，加载起来更高效。

创建一个日期插件（date）

接下来，我们一步步实现一个日期插件。整个过程可以分为几个清晰的步骤。

1. 创建插件目录与核心文件

首先，在ckeditor\plugins\目录下新建一个名为date的文件夹。然后，在date文件夹内创建plugin.js文件，并输入以下代码。这段代码的作用是注册插件，并绑定一个对话框命令。

CKEDITOR.plugins.add('date', {  requires: ['dialog'],  init: function (a) {    var b = a.addCommand('date', new CKEDITOR.dialogCommand('date'));    a.ui.addButton('date', {      label: a.lang.date.toolbar,      command: 'date',      icon: this.path + 'images/date.jpg'    });    CKEDITOR.dialog.add('date', this.path + 'dialogs/date.js');  }});

2. 准备图标文件

在date文件夹下新建一个images目录，放入一张名为date.jpg的图标图片。可以从网上找一张16x16像素的图标，大小刚好合适。

3. 编写对话框逻辑

在date文件夹下新建一个dialogs目录，然后创建date.js文件，输入以下代码。这个文件定义了插件弹出的对话框内容，包括输入框和说明文字。

CKEDITOR.dialog.add('date', function(editor){  var escape = function(value){    return value;  };  return {    title: '日历控件',    resizable: CKEDITOR.DIALOG_RESIZE_BOTH,    minWidth: 300,    minHeight: 80,    contents: [{      id: 'cb',      name: 'cb',      label: 'cb',      title: 'cb',      elements: [{        type: 'text',        label: '请输入日期控件名称',        id: 'lang',        required: true,      },{        type:'html',        html:'
说明：日历控件选择的日期、时间将回填到该输入框中。
'      }]    }],    onOk: function(){      lang = this.getValueOf('cb', 'lang');      editor.insertHtml("
" + lang + "
");    },    onLoad: function(){    }  };});

4. 将插件注册到CKEditor核心

下一步，需要将插件加入到CKEditor的配置中。这里我们直接修改核心文件ckeditor.js。以现有的about插件为参考，查找about，找到类似这样的行：

fullPage:false,height:200,plugins:'about,basicstyles

在about后面加上date，变成：

plugins:'about,date,basicstyles

继续查找about，找到类似这样的代码段：

j.add('about',{init:function(l){var m=l.addCommand('about',new a.dialogCommand('about'));m.modes={wysiwyg:1,source:1};m.canUndo=false;l.ui.addButton('About',{label:l.lang.about.title,command:'about'});a.dialog.add('about',this.path+'dialogs/about.js');}});

在这段代码前面，插入新插件的注册代码：

j.add('date', {requires: ['dialog'],init: function(l){l.addCommand('date', new a.dialogCommand('date'));l.ui.addButton('date', {label: l.lang.date.toolbar,command: 'date',icon: this.path + 'images/code.jpg'});a.dialog.add('date', this.path + 'dialogs/date.js');}});

接下来，查找i.toolbar_Basic=，这是CKEditor默认的工具栏配置。在工具栏中合适的位置添加date，例如：

['Maximize','ShowBlocks','-','date']

5. 添加语言文件

打开ckeditor\lang\zh-cn.js文件，在里面增加一行语言配置，让中文界面能正确显示插件名称：

,date:{toolbar: '日期控件'}, link: { toolbar: '编辑超链接', other: '<其他>', 

6. 配置工具栏显示

如果需要自定义工具栏，可以打开config.js进行配置。例如，在配置数组中添加date按钮：

/*Copyright (c) 2003-2012, CKSource - Frederico Knabben. All rights reserved.For licensing, see LICENSE.html or http://ckeditor.com/license*/CKEDITOR.editorConfig = function( config ){  config.toolbar =  [    ['Source'],    ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Print', 'Link', 'Unlink', 'Anchor'],    ['Undo', 'Redo', '-', 'Find', 'Replace', '-', 'SelectAll', 'ImageButton', 'Image'],    ['Styles', 'Format', 'Font', 'FontSize'],    ['TextColor', 'BGColor'],    ['date'] // 刚创建的日期插件（date）  ];};

到这里，对CKEditor的修改就完成了。运行后，工具栏上会出现一个新的日期控件按钮，点击即可弹出对话框进行操作。

实例图片：