ExtJS:向 htmleditor 添加按钮

Question

我正在使用 ExtJS，并且我的表单中有一个 htmleditor。我想向该元素添加一个自定义按钮(例如在所有其他按钮之后，如对齐、字体粗细等)。这个按钮基本上应该在 htmlfield 中插入一个标准模板。作为这个模板html，按钮的行为应该是这样的

切换到 HTML 模式(就像按下“源”按钮时一样)

插入东西

切换回 WYSIWYG 模式(就像再次按下 Source 按钮时一样)

感谢您的关注

Answer 1

您无需切换到 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)。在那里您可以找到更多关于添加自定义按钮的信息，例如，如何在选择某些内容时启用/禁用按钮、放置分隔符等。