- 切换到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>'); },范围:这个工具提示:'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/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/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添加按钮
发布评论