ExtJS: botón de añadir a HTMLEditor

Question

Estoy usando ExtJS y tengo una HTMLEditor en mi forma. Me gustaría añadir un botón personalizado a ese elemento (por ejemplo, después de todas las otras botones como alineaciones, los pesos de fuentes, ...). Este botón debe insertar básicamente una plantilla estándar en el htmlfield. Siendo esta plantilla html, el comportamiento del botón debe ser como este

• Cambiar a modo HTML (como cuando se pulsa el botón Fuente)
• Insertar algo
• Atrás Cambiar a modo WYSIWYG (como cuando se pulsa el botón Fuente de nuevo)

Gracias por su atención

Answer 1

No es necesario que cambie al modo HTML. Sólo tiene que utilizar la función insertAtCursor con la plantilla HTML.

I hizo esta fácil ejemplo de botón que inserta una línea horizontal (tag <hr>) cómo añadir:

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

Se puede ver funcionando a: jsfiddle.net/protron / DCGRg / 183 /

Pero realmente recomiendo que echa un vistazo a HtmlEditor.Plugins (o ateodorescu / mzExt para ExtJS 4). Allí se puede encontrar mucha más información sobre cómo añadir botones personalizados, por ejemplo, la forma de activar / desactivar los botones cuando se selecciona algo, separadores de palabras, etc.

Answer 2

También puede utilizar ExtJS.ux.HtmlEditor.Plugins: https: // github .com / VinylFox / ExtJS.ux.HtmlEditor.Plugins

Answer 3

Además de @proton gran respuesta anterior, no hay otra manera de Insertar para la barra de herramientas, diferente de la adición de ellos hasta el final. En mi respuesta voy a escribir como un nuevo control denominado 'RichTextBox' (y no como un plug-in), pero esto se puede hacer de cualquier otra manera:

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