ExtJS: botón Agregar a htmleditor

Question

Estoy usando ExtJS y tengo un htmleditor en mi formulario. Me gustaría agregar un botón personalizado a ese elemento (por ejemplo, después de todos los otros botones como alineaciones, pesos de fuentes, ...). Este botón básicamente debe insertar una plantilla estándar en htmlfield. Siendo este html plantilla, el comportamiento del botón debería ser así

• Cambiar a modo HTML (como cuando se pulsa el botón Fuente)
• insertar algo
• volver al modo WYSIWYG (como cuando se pulsa la Fuente botón de nuevo)

Gracias por su atención

Answer 1

no es necesario para cambiar al modo HTML. Simplemente use la función insertAtCursor con la plantilla HTML.

Hice este ejemplo fácil de botón que inserta una línea horizontal (<hr> etiqueta) cómo agregar:

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 recomendamos que consulte 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, cómo habilitar/deshabilitar los botones cuando se selecciona algo, poner separadores, 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, hay otra manera de insertar botones a la barra de herramientas, diferentes 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 
    } 
});