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

问题描述

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

• 切换到HTML模式（就像按下Source按钮）


• 插入一些


• 切换回WYSIWYG模式（如再次按下Source按钮时）

感谢您的关注

解决方案

您不需要切换到HTML模式。只需使用 insertAtCursor 函数与HTML模板。

我做了这个简单的例子，如何添加按钮插入一个水平标尺（< hr> 标签）：

 纳秒（ '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>'）; 
}，
范围：这个
工具提示：'horizo​​ntal ruler'，
 overflowText：'horizo​​ntal 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 ）。在这里，您可以找到更多关于添加自定义按钮的信息，例如，如何选择某些项目时启用/禁用按钮，放置分隔符等。

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

• Switch to HTML mode (like when pressing Source button)
• Insert something
• Switch back to WYSIWYG mode (like when pressing the Source button again)

Thanks for your attention

解决方案

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

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

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

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屋！