ExtJS: добавить кнопку в htmleditor - PullRequest
Новая
       30

ExtJS: добавить кнопку в htmleditor

8 голосов
/ 10 октября 2010

Я использую ExtJS, и у меня есть htmleditor в моей форме. Я хотел бы добавить пользовательскую кнопку к этому элементу (например, после всех других кнопок, таких как выравнивание, вес шрифта, ...). Эта кнопка должна в основном вставить стандартный шаблон в поле html. Будучи этим шаблоном HTML, поведение кнопки должно быть таким:

  • Переключение в режим HTML (как при нажатии кнопки «Источник»)
  • Вставьте что-нибудь
  • Переключение обратно в режим WYSIWYG (как при повторном нажатии кнопки «Источник»)

Спасибо за внимание

Ответы [ 3 ]

12 голосов
/ 13 октября 2010

Вам не нужно переключаться в режим HTML.Просто используйте функцию insertAtCursor с шаблоном HTML.

Я сделал простой пример того, как добавить кнопку, которая вставляет горизонтальную линейку (тег <hr>): 

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

Выможно увидеть, что он работает по адресу: jsfiddle.net / protron / DCGRg / 183 /

Но я очень рекомендую вам проверить HtmlEditor.Plugins (или ateodorescu / mzExt для ExtJS 4).Там вы можете найти гораздо больше о добавлении пользовательских кнопок, например, как включить / отключить кнопки, когда что-то выбрано, установить разделители и т. Д.

1 голос
/ 10 января 2013

Вы также можете использовать ExtJS.ux.HtmlEditor.Plugins: https://github.com/VinylFox/ExtJS.ux.HtmlEditor.Plugins

enter image description here

0 голосов
/ 25 декабря 2016

В дополнение к @ proton отличного ответа выше, есть еще один способ вставить кнопки на панель инструментов, отличающийся от добавления их в конец.В своем ответе я напишу его как новый элемент управления с именем 'RichTextBox' (а не как плагин), но это можно сделать любым другим способом: 

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