ExtJS:向 htmleditor 添加按钮

本文介绍了ExtJS:向 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/protron/DCGRg/183/

You can see it running at: jsfiddle/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.