ExtJS:向 htmleditor 添加按钮 [英] ExtJS: add button to htmleditor

问题描述

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

I am using ExtJS and I have a htmleditor in my form. I would like to add a custom button to that element (for example after all other buttons like alignments, font weights, ...). This button should basically insert a standard template in the htmlfield. Being this template html, the behaviour of the button should be like this

• 切换到 HTML 模式(例如按下源"按钮时)
• 插入内容
• 切换回 WYSIWYG 模式(例如再次按下 Source 按钮时)

感谢您的关注

推荐答案

您无需切换到 HTML 模式.只需在 HTML 模板中使用 insertAtCursor 函数即可.

You don't need to switch to HTML mode. Just use the insertAtCursor function with the HTML template.

我做了一个简单的例子来说明如何添加插入水平标尺的按钮(<hr> 标签):

I made this easy example of how to add button which inserts a horizontal ruler (<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()]
    }]
});

您可以在以下位置看到它运行:jsfiddle.net/protron/DCGRg/183/

You can see it running at: jsfiddle.net/protron/DCGRg/183/

但我真的建议您查看HtmlEditor.Plugins(或 ateodorescu/mzExt 对于 ExtJS4).在那里您可以找到更多关于添加自定义按钮的信息，例如，如何在选择某些内容时启用/禁用按钮、放置分隔符等.

But I really recommend you to check out HtmlEditor.Plugins (or ateodorescu/mzExt for ExtJS 4). There you can find a lot more about adding custom buttons, for instance, how to enable/disable the buttons when something is selected, put separators, etc.

这篇关于ExtJS:向 htmleditor 添加按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！