我正在使用ExtJS,我的表格中有一个htmleditor.我想为该元素添加一个自定义按钮(例如在对齐,字体权重等所有其他按钮之后).这个按钮基本上应该在htmlfield中插入一个标准模板.作为这个模板html,按钮的行为应该是这样的
>切换到HTML模式(如按Source按钮时)
>插入一些东西
>切换回WYSIWYG模式(比如再次按下Source按钮)
感谢您的关注
解决方法
您无需切换到HTML模式.只需将insertAtCursor函数与HTML模板一起使用即可.
我做了一个简单的例子,说明如何添加插入水平标尺的按钮(< hr>标记)：
Ext.ns('Ext.ux.form.HtmlEditor');
Ext.ux.form.HtmlEditor.HR = Ext.extend(Ext.util.Observable,{
init: function(cmp){
this.cmp = cmp;
this.cmp.on('render',this.onRender,this);
},onRender: function(){
this.cmp.getToolbar().addButton([{
iconCls: 'x-edit-bold',//your iconCls here
handler: function(){
this.cmp.insertAtCursor('<hr>');
},scope: this,tooltip: 'horizontal ruler',overflowText: 'horizontal ruler'
}]);
}
});
Ext.preg('ux-htmleditor-hr',Ext.ux.form.HtmlEditor.HR);
Ext.QuickTips.init();
new Ext.Viewport({
layout: 'fit',items: [{
xtype: 'htmleditor',plugins: [new Ext.ux.form.HtmlEditor.HR()]
}]
});
你可以看到它运行于：jsfiddle.net/protron/DCGRg/183/
但我真的建议你查看HtmlEditor.Plugins(或者说是ateodorescu/mzExt for ExtJS 4).在那里你可以找到更多关于添加自定义按钮的信息,例如,如何在选择内容时启用/禁用按钮,放置分隔符等.
