您无需切换到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('
');
},
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()]
}]
});
但我真的建议你查看HtmlEditor.Plugins(或者说是ateodorescu/mzExt for ExtJS 4).在那里你可以找到更多关于添加自定义按钮的信息,例如,如何在选择内容时启用/禁用按钮,放置分隔符等.