ExtJS: add button to htmleditor

Question

I am using ExtJS and I have a htmleditor in my form. I would like to add a custom button to that element (for example after all other buttons like alignments, font weights, ...)

Answer 1

In addition to @proton great answer above, there's another way to insert buttons to the toolbar, different from adding them to the end. In my answer i'll write it as a new control named 'RichTextBox' (and not as a plugin) but this can be done in any other way:

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