extjs 插入html内容,ExtJS：向htmleditor添加按钮

Ext.define('Ext.ux.form.RichTextBox', {

extend: 'Ext.form.field.HtmlEditor',

xtype: 'richtextbox',

enableSourceEdit: false, // i choose to hide the option that shows html

initComponent: function () {

this.on('render', this.onRender, this);

this.callParent();

},

/**

* Insert buttons listed below to the html-editor at specific position.

* handler is implemented using 'execCommand':

* https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand

*/

onRender: function () {

var me = this;

var tb = me.getToolbar();

var btns = {

StrikeThrough: {

//xtype: 'button', // button is default item for this toolbar

itemId: 'btnStrikeThrough',

iconCls: 'x-toolbar-strikethrough ', //choose icon with css class

enableOnSelection: true,

overflowText: 'StrikeThrough',

tooltip: {

title: 'StrikeThrough',

text: 'Toggles strikethrough on/off for the selection or at the insertion point'

},

handler: function () {

this.getDoc().execCommand('strikeThrough', false, null);

},

scope: this,

},

/** Seperator */

sep: "-"

};

tb.insert(5, btns.StrikeThrough); // insert button to the toolbar

//tb.insert(10, btns.sep); // add seperator

//tb.remove(26); // remove button, seperator, etc.

this.callParent(); //important: call regular 'onRender' here or at the start of the foo

}

});