### xhEditor demo9 : 自定义按钮之插件扩展

<p><strong>插件初始化参考代码：</strong><br /></p>&lt;script type=&quot;text/javascript&quot;&gt;<br />var editor;<br />$(pageInit);<br />function pageInit()<br />{<br />&nbsp;&nbsp; &nbsp;var allPlugin={<br />&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; subscript:{c:'testClassName',t:'下标:调用execCommand(subscript)'},<br />&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; superscript:{c:'testClassName',t:'上标:调用execCommand(superscript)'},<br />&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; test1:{c:'testClassName',t:'测试1：加粗 (Ctrl+1)',s:'ctrl+1',e:function(){<br />&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; this._exec('Bold');<br />&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; }},<br />&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; test2:{c:'testClassName',t:'测试2：普通对话框 (Ctrl+2)',s:'ctrl+2',h:1,e:function(){<br />&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; var _this=this;<br />&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; var jTest=$('&lt;div&gt;测试showDialog&lt;/div&gt;&lt;div style=&quot;text-align:right;&quot;&gt;&lt;input type=&quot;button&quot; id=&quot;xheSave&quot; value=&quot;确定&quot; /&gt;&lt;/div&gt;');<br />&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; var jSave=$('#xheSave',jTest);<br />&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; jSave.click(function(){<br />&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; _this.pasteHTML('点击了确定按钮');<br />&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; _this.hidePanel();<br />&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; return false;&nbsp;&nbsp; &nbsp;<br />&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; });<br />&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; _this.saveBookmark();<br />&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; _this.showDialog(jTest);<br />&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; }},<br />&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; test3:{c:'testClassName',t:'测试3：需要转移焦点的对话框 (Ctrl+3)',s:'ctrl+3',h:1,e:function(){<br />&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; var _this=this;<br />&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; var jTest=$('&lt;div&gt;测试需要转移焦点的showDialog&lt;/div&gt;&lt;div&gt;&lt;textarea id=&quot;xheTestInput&quot; style=&quot;width:260px;height:100px;&quot;&gt;当互动界面中有input或者textarea等会产生焦点的表单项时，必需在插入内容前用loadBookmark函数加载之前保存的光标焦点。&lt;/textarea&gt;&lt;/div&gt;&lt;div style=&quot;text-align:right;&quot;&gt;&lt;input type=&quot;button&quot; id=&quot;xheSave&quot; value=&quot;确定&quot; /&gt;&lt;/div&gt;');<br />&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; var jTestInput=$('#xheTestInput',jTest),jSave=$('#xheSave',jTest);<br />&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; jSave.click(function(){<br />&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; _this.loadBookmark();<br />&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; _this.pasteText('您输入了：'+jTestInput.val());<br />&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; _this.hidePanel();<br />&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; return false;&nbsp;&nbsp; &nbsp;<br />&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; });<br />&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; _this.saveBookmark();<br />&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; _this.showDialog(jTest);<br />&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; }},<br />&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; test4:{c:'testClassName',t:'测试4：面板界面 (Ctrl+4)',s:'ctrl+4',h:1,e:function(){<br />&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; var _this=this;<br />&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; var jTest=$('&lt;div style=&quot;padding:5px;&quot;&gt;测试showPanel&lt;/div&gt;');<br />&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; _this.showPanel(jTest);<br />&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; }},<br />&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; test5:{c:'testClassName',t:'测试5：菜单调用 (Ctrl+5)',s:'ctrl+5',h:1,e:function(){<br />&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; var _this=this;<br />&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; var arrMenu=[{s:'菜单1',v:'menu1',t:'这是菜单1'},{s:'菜单2',v:'menu2',t:'这是菜单2'},{s:'菜单3',v:'menu3',t:'这是菜单3'}];<br />&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; _this.saveBookmark();<br />&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; _this.showMenu(arrMenu,function(v){_this.pasteHTML(v);});<br />&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; }},<br />&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; test6:{c:'testClassName',t:'测试6：showModal (Ctrl+6)',s:'ctrl+6',e:function(){<br />&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; var _this=this;<br />&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; _this.saveBookmark();<br />&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; _this.showModal('测试showModal接口','&lt;div style=&quot;padding:5px;&quot;&gt;模式窗口主体内容&lt;/div&gt;',500,300);<br />&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; }},<br />&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; test7:{c:'testClassName',t:'测试7：showIframeModal (Ctrl+7)',s:'ctrl+7',e:function(){<br />&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; var _this=this;<br />&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; _this.saveBookmark();<br />&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; _this.showIframeModal('测试showIframeModal接口','uploadgui.php',function(v){_this.loadBookmark();_this.pasteText('返回值：\r\n'+v);},500,300);<br />&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; }}<br />&nbsp;&nbsp; &nbsp;};<br />&nbsp;&nbsp; &nbsp;editor=$('#elm1').xheditor({plugins:allPlugin,tools:'subscript,superscript,test1,test2,test3,test4,test5,test6,test7,|,Source,Fullscreen,About'});<br />}<br />&lt;/script&gt;<p><strong>插件对象的属性解释：</strong><br /><br />c：样式表名称　t：插件名字(鼠标在按钮上方时显示)　s：快捷方式(例如：Esc、Ctr+B)　h：是否鼠标悬停直接执行,1:直接执行(省略当前值代表不直接执行)　e：按钮点击后需要执行的代码(省略执行代码，则把当前的插件名作为参数，调用浏览器的execCommand函数)<br /><br /><br /><br /><strong>特别说明：</strong><br />如果您希望样式表存储在系统自带的模板目录ui.css中，请将插件对象的样式名留空，则会自动按照插件名来调用相应的样式，例如：xhEdtBtnCut、xhEdtBtnCopy，其中的Cut和Copy是插件名<br /><br /></p>