编辑“Xheditor/插件开发指南”

{{Xheditor导航}}

标准插件开发流程：

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

下面我们就demo09中的一个最简单插件作介绍：
<pre><nowiki>
    <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); 
                }}
</nowiki></pre>

这个插件实现的功能是打开一个iframe，并将iframe返回的参数[[字符串]]插入到当前[[编辑器]]光标处。
#其中test7为插件的name，用来在tools初始化参数中调用
#c:'testClassName'为插件的样式名称
#t:'测试7：showIframeModal (Ctrl+7)'是鼠标放在按钮上显示的提示文字
#s:'ctrl+7'是定义插件的快捷方式，在编辑器区域里按设置的快捷方式就会执行此插件事件；
#e:function(){}为插件点击后要执行的代码

'''特别说明'''：

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

==参考来源==
*http://xheditor.com/manual/2#chapter2 



[[category:Xheditor|C]]
{{Xheditor使用手册导航}}