ExtJS: 在htmleditor中添加按钮

Question

我正在使用ExtJS，我的表单中有一个html编辑器。我想在该元素中添加一个自定义按钮（例如在所有其他按钮之后，如对齐、字体重量等）。这个按钮应该基本上在html字段中插入一个标准模板。由于这个模板是html，所以按钮的行为应该像这样：

• 切换到HTML模式（就像按源代码按钮一样）
• 插入一些内容
• 再次切换到所见即所得模式（就像再次按源代码按钮一样）

感谢您的关注。

- Danilo

Answer 1

您不需要切换到HTML模式，只需使用带有HTML模板的insertAtCursor函数。

我制作了一个简单的示例，演示如何添加一个插入水平线(<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（或者针对ExtJS 4的ateodorescu/mzExt）。在那里，你可以找到很多关于添加自定义按钮的内容，例如如何在选择某些内容时启用/禁用按钮、放置分隔符等。

- Mariano Desanze

---

.addButton([{ .. }]) - 不起作用 - 相反，您应该使用： this.cmp.getToolbar().add({ /* 按钮定义 */}) - snir

@snir 谢谢！自ExtJS v4起就需要使用add（v4示例）。而在ExtJS v3中，addButton可以正常工作（v3示例）。 - Mariano Desanze

Answer 2

您也可以使用ExtJS.ux.HtmlEditor.Plugins：https://github.com/VinylFox/ExtJS.ux.HtmlEditor.Plugins

- Farid Movsumov

Answer 3

除了@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
  }
});

- snir