ExtJS: die Schaltfläche hinzufügen, um htmleditor

Brauchen Sie nicht zu wechseln Sie zur HTML-Modus. Verwenden Sie einfach die insertAtCursor - Funktion mit der HTML-Vorlage.

Ich habe dieses einfache Beispiel zum hinzufügen die Schaltfläche fügt eine horizontale Lineal (<hr> tag):

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()]
    }]
});

Können Sie sehen, es läuft: jsfiddle.net/protron/DCGRg/183/

Aber ich bin wirklich zu empfehlen Sie heraus zu überprüfen HtmlEditor.Plugins (oder ateodorescu/mzExt für ExtJS 4). Dort finden Sie eine Menge mehr über das hinzufügen von benutzerdefinierten Schaltflächen, wie beispielsweise das aktivieren/deaktivieren der Tasten, wenn etwas ausgewählt ist, setzen Separatoren, usw.

Neben @proton tolle Antwort oben, es ist ein weiterer Weg, um einfügen Schaltflächen auf der Symbolleiste anders aus, indem Sie Sie auf das Ende.
In meiner Antwort Schreibe ich es als neues Steuerelement mit dem Namen 'RichTextBox' (und nicht als plugin), aber diese kann getan werden, in einer anderen Weise:

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
  }
});