ExtJS: ajouter un bouton à htmleditor

Question

J'utilise ExtJS et j'ai un htmleditor dans mon formulaire. Je voudrais ajouter un bouton personnalisé à cet élément (par exemple après tous les autres boutons comme les alignements, les poids de police, ...). Ce bouton devrait essentiellement insérer un modèle standard dans le champ html. Être ce html modèle, le comportement du bouton doit être comme ça

• Passer en mode HTML (comme lorsque vous appuyez sur le bouton Source)
• Insérer quelque chose
• Retour au mode WYSIWYG (comme lorsque vous appuyez sur la source nouveau sur le bouton)

Merci pour votre attention

Answer 1

Vous n'avez pas besoin de passer en mode HTML. Utilisez simplement la fonction insertAtCursor avec le modèle HTML.

J'ai fait cet exemple facile comment ajouter le bouton qui insère une règle horizontale (<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()] 
    }] 
}); 

Vous pouvez le voir en cours d'exécution à: jsfiddle.net/protron/DCGRg/183/

Mais je vous recommande vraiment de vérifier sur HtmlEditor.Plugins (ou ateodorescu/mzExt pour ExtJS 4). Vous y trouverez beaucoup plus sur l'ajout des boutons personnalisés, par exemple, comment activer/désactiver les boutons lorsque quelque chose est sélectionné, mettre des séparateurs, etc.

Answer 2

Vous pouvez également utiliser ExtJS.ux.HtmlEditor.Plugins: https://github.com/VinylFox/ExtJS.ux.HtmlEditor.Plugins

Answer 3

En plus de @proton grande réponse ci-dessus, il y a une autre façon de insérer boutons à la barre d'outils, différents de les ajouter à la fin. Dans ma réponse, je vais écrire comme un nouveau contrôle nommé « RichTextBox » (et non pas comme un plug-in), mais cela peut être fait de toute autre manière:

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