现在的位置: 首页 > 综合 > 正文

CKEditor插件开发

2013年07月29日 ⁄ 综合 ⁄ 共 6068字 ⁄ 字号 评论关闭

最近忙于开发工作流,想起之前开发的OA ,缺少一个重要的功能:表单设计器。因为我们的OA是基于Sharepoint开发的,如果没有表单设计器,定义一个列表的界面需要开发一个feature,或则需要VS开发一个aspx页面。这事一个很麻烦的事情。所以考虑实现一个表单设计器。
于是我到网上找HTML 编辑器,找到好几个,分别有CKEditor,TinyMCE,还有一个基于JQuery的一个编辑器XHEditor。这几个编辑器我就不做比较了。我这里选择使用CKEditor。既然要做表单设计器,我们的需要扩展这HTML编辑器,CKEditor提供了方便可扩展的插件体系,我们可以很方便的自定义一些自己的插件。这只介绍概述CKEditor插件开发。
首先我们到http://ckeditor.com/download下载CKEditor,这里我使用的是CKEditor 3.6。解压后目录如下:

Dir

CKEditor的源码存放在_source目录下面,根目录下面的ckeditor.js是经过压缩的代码。Dom元素操作,事件处理,初始化脚本和其他一些环境设置都在ckeditor\_souce\core目录下面。其他功能,如格式化,复制粘贴,图片和链接都是以插件的形式实现的,存放在ckeditor\_source\plugins文件夹下面,每一个文件夹为一个插件。每个文件夹下面都有一个plugin.js的脚本文件。

为了减少HTML 请求数量,CKEditor压缩并打包成ckeditor.js 和ckeditor_basic.js。默认运行压缩后的ckeditor。在开发过程中,如果你想运行未压缩的源码,则把ckeditor.js替换成ckeditor_source.js就可以了。

我们以Hello World插件为例子。呵呵。在plugins目录下面新建一个HelloWorld文件夹,并在下面建立一个plugin.js文件。

插件配置

要CKEditor能够调用我们开发的插件,我们需要在CKEditor注册我们开发的插件。打开根目录下面的config.js。设置CKEDITOR.editorConfig属性

config.extraPlugins = 'HelloWorld';

完整的代码如下:

CKEDITOR.editorConfig = function( config )

{

    // Define changes to default configuration here. For example:

    // config.language = 'fr';

    // config.uiColor = '#AADC6E';

    config.extraPlugins = 'HelloWorld';

};

这样CKEditor会从Plugin文件夹找HelloWorld文件夹下面的plugin.js,并加载插件。

工具栏按钮

我们需要在CKEditor的工具栏上加入HelloWorld的按钮。单击按钮出发一个命令。命令可以触发一个事件,或调用方法。我们通过CKEDITOR.plugins.add方法来添加插件。

CKEDITOR.plugins.add('HelloWorld', {

    init: function (editor) {

        var pluginName = 'HelloWorld';

        CKEDITOR.dialog.add(pluginName, this.path + 'dialogs/HelloWorld.js');

        editor.addCommand(pluginName, new CKEDITOR.dialogCommand(pluginName));

        editor.ui.addButton(pluginName,

        {

            label: 'Hello',

            command: pluginName

        });

    }

});

上面代码中,我们添加了一个HelloWorld的按钮,和HelloWorld的命令。

通过方法editor.ui.addButton添加一个按钮,这个方法有两个参数。一个是按钮的名字,另外一个是按钮的定义。

定义有以下几个属性:

label:当鼠标移动到按钮上面是提示此文本信息。

className:样式名,默认是'cke_button_' + command

click:按钮的单击事件出发的方法。如果没有实现单击事件,则执行指定key的命令。

command:按钮单击默认执行的命令。

下面是按钮的部分源码。

CKEDITOR.ui.button = function( definition )

  {

      // Copy all definition properties to this object.

      CKEDITOR.tools.extend( this, definition,

          // Set defaults.

          {

              title        : definition.label,

              className    : definition.className || ( definition.command && 'cke_button_' + definition.command ) || '',

              click        : definition.click || function( editor )

                  {

                      editor.execCommand( definition.command );

                  }

          });

  

      this._ = {};

  };

editor表示一个编辑器的实例。通过调用其addCommand(commandName, commandDefinition) 方法,来添加命令。我们实例化了一个CKEDITOR.dialogCommand,此命令继承至CKEDITOR.commandDefinition,该命令执行时打开一个特定的对话框。我们现在把这个按钮加入到ToolBar里,修改Config.js。

CKEDITOR.editorConfig = function (config) {

    // Define changes to default configuration here. For example:

    // config.language = 'fr';

    // config.uiColor = '#AADC6E';

    config.toolbar =

                [

                    { name: 'document', items: ['Source', '-', 'Save', 'NewPage', 'DocProps', 'Preview', 'Print', '-', 'Templates'] },

                    { name: 'clipboard', items: ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo'] },

                    { name: 'editing', items: ['Find', 'Replace', '-', 'SelectAll', '-', 'SpellChecker', 'Scayt'] },

                    { name: 'forms', items: ['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'] },

                    '/',

                    { name: 'basicstyles', items: ['Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat'] },

                    { name: 'paragraph', items: ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BidiLtr', 'BidiRtl'] },

                    { name: 'links', items: ['Link', 'Unlink', 'Anchor'] },

                    { name: 'insert', items: ['Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak', 'Iframe'] },

                    '/',

                    { name: 'styles', items: ['Styles', 'Format', 'Font', 'FontSize'] },

                    { name: 'colors', items: ['TextColor', 'BGColor'] },

                    { name: 'tools', items: ['Maximize', 'ShowBlocks', '-', 'About'] },

                    '/',

                    { name: 'extent', items: ['HelloWorld'] }

                ];

    config.extraPlugins += (config.extraPlugins ? ',HelloWorld' : 'HelloWorld');

};

注释:’/’表示换行,’-‘标识分隔符 。

config.toolbar的默认值是Full。Full的菜单有哪些呢?打开ckeditor\_source\plugins\toolbar\plugin.js查看toolbar_Full的定义。

CKEDITOR.config.toolbar_Full =

[

    { name: 'document',        items : [ 'Source','-','Save','NewPage','DocProps','Preview','Print','-','Templates' ] },

    { name: 'clipboard',    items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] },

    { name: 'editing',        items : [ 'Find','Replace','-','SelectAll','-','SpellChecker', 'Scayt' ] },

    { name: 'forms',        items : [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField' ] },

    '/',

    { name: 'basicstyles',    items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat' ] },

    { name: 'paragraph',    items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','CreateDiv','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl' ] },

    { name: 'links',        items : [ 'Link','Unlink','Anchor' ] },

    { name: 'insert',        items : [ 'Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak','Iframe' ] },

    '/',

    { name: 'styles',        items : [ 'Styles','Format','Font','FontSize' ] },

    { name: 'colors',        items : [ 'TextColor','BGColor' ] },

    { name: 'tools',        items : [ 'Maximize', 'ShowBlocks','-','About' ] }

];

那么我们可以模仿来定义Mine的ToolBar。再次编辑config.js。

CKEDITOR.editorConfig = function (config) {

    // Define changes to default configuration here. For example:

    // config.language = 'fr';

    // config.uiColor = '#AADC6E';

    config.toolbar_Mine =

                [

                    { name: 'document', items: ['Source', '-', 'Save', 'NewPage', 'DocProps', 'Preview', 'Print', '-', 'Templates'] },

                    { name: 'clipboard', items: ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo'] },

                    { name: 'editing', items: ['Find', 'Replace', '-', 'SelectAll', '-', 'SpellChecker', 'Scayt'] },

                    { name: 'forms', items: ['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'] },

                    '/',

                    { name: 'basicstyles', items: ['Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat'] },

                    { name: 'paragraph', items: ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BidiLtr', 'BidiRtl'] },

                    { name: 'links', items: ['Link', 'Unlink', 'Anchor'] },

                    { name: 'insert', items: ['Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak', 'Iframe'] },

                    '/',

                    { name: 'styles', items: ['Styles', 'Format', 'Font', 'FontSize'] },

                    { name: 'colors', items: ['TextColor', 'BGColor'] },

                    { name: 'tools', items: ['Maximize', 'ShowBlocks', '-', 'About'] },

                    '/',

抱歉!评论已关闭.