ExtJS: dodaj przycisk do htmleditor

Question

Używam ExtJS i mam htmleditor w mojej formie. Chciałbym dodać niestandardowy przycisk do tego elementu (na przykład po wszystkich innych przyciskach, takich jak wyrównania, grubości czcionki, ...). Ten przycisk powinien po prostu wstawić standardowy szablon w htmlfield. Będąc tego szablonu html, zachowanie przycisku powinno być jak ten

• Przełącz do trybu HTML (jak po naciśnięciu przycisku Source)
• Włóż coś
• przełączyć z powrotem na tryb WYSIWYG (jak po naciśnięciu Źródło przycisk ponownie)

Dzięki za uwagę

Answer 1

nie trzeba, aby przełączyć na tryb HTML. Po prostu użyj funkcji insertAtCursor z szablonem HTML.

zrobiłem ten prosty przykład jak przycisk, który wstawia linijkę poziomą (<hr> tag) dodać:

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

widać to działa na: jsfiddle.net/protron/DCGRg/183/

Ale naprawdę polecam Ci sprawdzić out HtmlEditor.Plugins (lub ateodorescu/mzExt dla ExtJS 4). Można tam znaleźć wiele informacji na temat dodawania niestandardowych przycisków, na przykład, w jaki sposób włączyć/wyłączyć przyciski, gdy wybrany jest coś, umieścić separatory itp

Answer 2

Można również użyć ExtJS.ux.HtmlEditor.Plugins: https://github.com/VinylFox/ExtJS.ux.HtmlEditor.Plugins

Answer 3

Oprócz @proton wielkiej odpowiedzi powyżej, istnieje inny sposób na wstawić przyciski do paska narzędzi, różne od dodawania ich do końca. W mojej odpowiedzi będę zapisać go jako nowy sterowania o nazwie „RichTextBox” (a nie jako dodatek), ale można to zrobić w inny sposób:

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