编辑“Ueditor/自定义插件开发”

{{Ueditor导航}}

'''自定义插件开发'''

下面我们将会以[[源码]]包中的table插件为例来开始一个完整的插件开发之旅。

一、插件内部结构

首先我们整体来看下table.js中的文档结构图。
<pre><nowiki>
   baidu.editor.plugins['table'] = function() {
     var me = this;
     //注册鼠标和键盘事件
     me.addListener('mousedown', _mouseDownEvent);
     me.addListener('keydown', function(type, evt) {});
     me.addListener('mouseup', function() {});

     //注册插入表格命令
     me.commands['inserttable'] = {
         queryCommandState: function (cmdName) {},
         execCommand: function (cmdName, tableobj) {},
         queryCommandValue:function (cmdName) {}
     }
     //注册删除表格命令
     me.commands['deletetable'] = {
         queryCommandState: function (cmdName) {},
         execCommand: function (cmdName) {},
         queryCommandValue:function (cmdName) {}
     }
   }
</nowiki></pre>

这个文档结构图完整地描述了一个自定义插件的主要内容。这其中包括为[[编辑器]]注册监听事件和注册命令两个方面。其他任何新插件的添加方式都可照此格式书写即可。

二、插件具体写法

在table.js文件中，首先要做的就是在baidu.editor命名空间下的plugins中创建一个名为table的插件，其实质就是为编辑器绑定一个名为table的方法。插件名字一般情况下没有用处，只有当一个页面同时存在多个编辑器，并且这几个编辑器所引入的插件不一样时，它才会有一定的用处，此处暂时不提。注册插件方法如下例：

       baidu.editor.plugins['table'] = function() {}

注册鼠标和键盘事件没有特殊的地方，此处略过不提，主要来看在插件中编写命令的方法。

在插件中写命令其实跟直接写命令没什么区别。首先通过在editor下的commands中设置命令名字，然后编写execCommandState（获取当前命令是否可用，用于toolbar中的状态反射，返回0时表示命令可以执行，-1时置灰, 1时高亮）、execCommand（命令执行主体）和queryCommandValue三个主要方法即可。这三个方法可以根据不同的插件有选择地选用，无需全部编写。所有方法的参数都可以省略，省略情况下默认传入command名称。但是如果参数没有省略，则第一个参数必须是command名称。在command中，获取当前range的方法是:

       var range = this.selection.getRange();

在这个range的基础上可以完成所有的编辑器操作。

三、集成插件到UEditor

当完成table.js的编写之后，接下来要做的就是为其在toolbar中添加对应的操作按钮。

首先澄清下[[UE]]中操作按钮的一些注意事项。在UE中，toolbar里的操作按钮基本上可以分为三种不同的类型：命令型、下拉菜单型和对话框型。其中下拉菜单又可以分为iframe型和普通型，对话框又可分为需要确定和不需要确定两种类型。大部分的按钮都是命令型，如B，I，U等；下拉菜单型包括表格、列表、字体字号、表情等；对话框型包括表格、地图、图片、特殊字符等。具体的差别同学们可以自己尝试下看看。而这其中，表格和列表又是其中最为复杂的两个。表格综合了下拉菜单和对话框两种类型的按钮，列表综合了命令和下拉菜单两种类型的按钮。下面来看具体的添加过程。

首先打开editor_config.js配置文件，找到toolbars和labelMap两个配置项，分别在其中添加table插件中的命令名字（单词首字母需要大写）和命令描述。这里的配置主要用来让编辑器在初始化时将命令按钮显示到toolbar中，与具体的按钮功能无关。需要注意的是，这里的配置包含了编辑器的所有按钮，往往作为系统的默认配置。多数情况下，一个编辑器往往不会完整地用到demo中的所有功能，所以在实例化一个editor的时候，通常会在里面添加toolbars参数来覆盖默认配置，示例代码如下： 
<pre><nowiki>
<script type="text/javascript">
    var editor = new baidu.editor.ui.Editor({
        toolbars:[[ 'ForeColor','BackColor',InsertTable]]
    });
    editor.render('myEditor');
</script>
</nowiki></pre>            

在完成toolbars的配置之后，编辑器在实例化时就会去尝试创建对应的ui实例。ui实例需要在_src/ui/editorui.js进行创建和配置。

然后打开editorui.js文件，在这里，我们很快就能发现上文所说的三种不同类型的操作按钮之间的区别。btnCmds,dialogNoButton,dialogCmds,分别代表了命令型按钮、不需要确定的弹出窗口和需要确定的弹出窗口三种集合的绑定实现，而其他众多零散的分别代表各种其他类型按钮的绑定实现。Inserttable有两种类型的实现方式，对应到代码中，就为其绑定了两个不同的ui实现方式，一个是dialog，另外一个是用popup来实现的下拉菜单。 


==参考来源==
*http://ueditor.baidu.com/teach.html#postData 


[[category:Ueditor|Z]]
{{Ueditor使用手册导航}}