ExtJS: bouton ajouter pour htmleditor

Je suis en utilisant ExtJS et j'ai un htmleditor dans mon formulaire. Je voudrais ajouter un bouton personnalisé sur cet élément (par exemple, après tous les autres boutons comme les alignements, la police de poids, ...). Ce bouton doit essentiellement insérer un modèle standard dans le htmlfield. Ce modèle html, le comportement de la touche doit être comme ceci

  • Basculer en mode HTML (comme lorsque vous appuyez sur le bouton Source)
  • Insérer quelque chose
  • Revenir en mode WYSIWYG (comme lorsque vous appuyez sur le bouton Source de nouveau)

Merci pour votre attention

OriginalL'auteur Danilo | 2010-10-10

  1. 12

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

    J'ai pris cette exemple simple de comment ajouter un 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 tiens à vous recommander de vérifier HtmlEditor.Les Plugins (ou ateodorescu/mzExt pour ExtJS 4). De là, vous pouvez trouver un beaucoup plus sur l'ajout de boutons personnalisés, par exemple, comment activer/désactiver les boutons quand quelque chose est sélectionné, mettre des séparateurs, etc.

    .addButton([{ .. }]) - ne fonctionne pas - au lieu de cela, vous devez utiliser: ce.cmp.getToolbar().add({ /* boutons definitions */})
    Merci! add est nécessaire, car ExtJS v4 (exemple v4). addButton fonctionne très bien dans ExtJS v3 (exemple de v3).

    OriginalL'auteur Mariano Desanze

  2. 1

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

    ExtJS: bouton ajouter pour htmleditor

    OriginalL'auteur Farid Movsumov

  3. 0

    En plus de @proton grande réponse ci-dessus, il y a une autre façon de insérer boutons de la barre d'outils, différents de les ajouter à la fin.
    Dans ma réponse, je vais l'écrire comme un nouveau contrôle appelé "RichTextBox" (et non pas comme un plugin), mais cela peut être fait d'une 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
  }
});

    OriginalL'auteur snir