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

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