ExtJS: Add-Taste, um Htmleditor

Question

Ich verwende ExtJS und ich habe ein Htmleditor in meiner Form. Ich möchte eine benutzerdefinierte Schaltfläche zu diesem Elemente hinzuzufügen (zum Beispiel nach allen anderen Tasten wie Ausrichtungen, Schriftschnitte, ...). Diese Schaltfläche sollte grundsätzlich eine Standardvorlage in der htmlfield einfügen. Als diese Vorlage html, sollte das Verhalten der Taste wie diese

sein

• Wechseln Sie in dem HTML-Modus (wie beim Source-Taste drücken)
• Legen Sie etwas
• Wechseln Sie wieder zu WYSIWYG-Modus (wie wenn wieder die Source-Taste drücken)

Vielen Dank für Ihre Aufmerksamkeit

Answer 1

Sie müssen nicht auf Schalter in HTML-Modus benötigen. Verwenden Sie einfach die insertAtCursor Funktion mit dem HTML-Template.

Ich habe dieses einfache Beispiel, wie Schaltfläche hinzufügen, die eine horizontale Lineal Einsätze (<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()]
    }]
});

Sie können sehen, es läuft unter: jsfiddle.net/protron / DCGRg / 183 /

Aber ich empfehle Ihnen wirklich zu überprüfen, HtmlEditor.Plugins (oder ateodorescu / mzExt für ExtJS 4). Dort finden Sie eine Menge mehr über das Hinzufügen von benutzerdefinierten Tasten, zum Beispiel finden, wie zum Aktivieren / Deaktivieren Sie die Tasten, wenn etwas ausgewählt ist, setzen Separatoren, etc.

Answer 2

Sie können auch ExtJS.ux.HtmlEditor.Plugins verwenden: https: // Github .com / VinylFox / ExtJS.ux.HtmlEditor.Plugins

Answer 3

Neben @proton große Antwort oben, gibt es eine andere Art und Weise zu Einsatz Tasten die Werkzeugleiste, die sich von ihnen bis zum Ende hinzufügen. In meiner Antwort schreiben ich werde es als eine neue Steuerelement mit dem Namen ‚RichTextBox‘ (und nicht als Plugin), aber dies kann auf andere Weise erfolgen:

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