Xheditor/插件开发指南

标准插件开发流程：

1. 设计插件图标并在页面中定义好CSS；
2. 定义插件参数并写入初始化参数plugins；
3. 编写插件调用时要执行的代码。

下面我们就demo09中的一个最简单插件作介绍：

    <style type="text/css">
    .testClassName {
        background:transparent url(img/plugin.gif) no-repeat 20px 20px;
        background-position:3px 3px;
    }
    </style>

    test7:{c:'testClassName',t:'测试7：showIframeModal (Ctrl+7)',s:'ctrl+7',e:function(){
                        var _this=this;
                        _this.saveBookmark();
                        _this.showIframeModal('测试showIframeModal接口','uploadgui.html',function(v){_this.loadBookmark();_this.pasteText('返回值：\r
    \n'+v);},500,300); 
                }}

这个插件实现的功能是打开一个iframe，并将iframe返回的参数字符串插入到当前编辑器光标处。

1. 其中test7为插件的name，用来在tools初始化参数中调用
2. c:'testClassName'为插件的样式名称
3. t:'测试7：showIframeModal (Ctrl+7)'是鼠标放在按钮上显示的提示文字
4. s:'ctrl+7'是定义插件的快捷方式，在编辑器区域里按设置的快捷方式就会执行此插件事件；
5. e:function(){}为插件点击后要执行的代码

特别说明：

1. 插件执行函数中可以用this.的方式调用所有的API接口函数。如果使用回调函数，请将this变量保存在临时变量中，例如_this;
2. 在某些浏览器下，打开会转移焦点的操作界面，会导致编辑区域焦点丢失。例如：showIframeModal，在showIframeModal之前要先执行saveBookmark保存焦点，再在回调函数中执行loadBookmark函数恢复焦点，之后才能调用pasteHTML等函数;
3. 如果希望样式表存储在系统自带的模板目录ui.css中，请将插件对象样式名留空，则会自动按照插件名来调用相应的样式，例如：xhEdtBtnCut、xhEdtBtnCopy，其中的Cut和Copy是插件名。

参考来源

• http://xheditor.com/manual/2#chapter2

Xheditor使用手册导航
入门基础 进阶使用： 进阶使用指导|初始化参数列表|API函数接口列表|上传程序开发规范|插件开发指南|皮肤设计指南 其它相关