题
我正在使用Extjs,并且我的形式有一个htmleditor。我想在该元素中添加一个自定义按钮(例如,在所有其他按钮之后,例如对齐,字体重量,...)。此按钮基本上应在HTMLField中插入标准模板。作为此模板html,按钮的行为应该像这样
- 切换到HTML模式(例如按下源按钮时)
- 插入一些东西
- 切换回WYSIWYG模式(例如,再次按下源按钮时)
感谢您的关注
解决方案
您无需切换到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)。在这里,您可以找到有关添加自定义按钮的更多信息,例如,如何在选择某些内容时启用/禁用按钮,放置分隔器等。
其他提示
您还可以使用extjs.ux.htmleditor.plugins: https://github.com/vinylfox/extjs.ux.htmleditor.plugins
此外 @proton 上面很棒的答案,还有另一种方法 插入 工具栏的按钮与将其添加到末端不同。在我的答案中,我将其写为一个名为“ RichTextbox”的新控件(而不是插件),但可以以其他任何方式完成:
Ext.define('Ext.ux.form.RichTextBox', {
extend: 'Ext.form.field.HtmlEditor',
xtype: 'richtextbox',
enableSourceEdit: false, // i choose to hide the option that shows html
initComponent: function () {
this.on('render', this.onRender, this);
this.callParent();
},
/**
* Insert buttons listed below to the html-editor at specific position.
* handler is implemented using 'execCommand':
* https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand
*/
onRender: function () {
var me = this;
var tb = me.getToolbar();
var btns = {
StrikeThrough: {
//xtype: 'button', // button is default item for this toolbar
itemId: 'btnStrikeThrough',
iconCls: 'x-toolbar-strikethrough ', //choose icon with css class
enableOnSelection: true,
overflowText: 'StrikeThrough',
tooltip: {
title: 'StrikeThrough',
text: 'Toggles strikethrough on/off for the selection or at the insertion point'
},
handler: function () {
this.getDoc().execCommand('strikeThrough', false, null);
},
scope: this,
},
/** Seperator */
sep: "-"
};
tb.insert(5, btns.StrikeThrough); // insert button to the toolbar
//tb.insert(10, btns.sep); // add seperator
//tb.remove(26); // remove button, seperator, etc.
this.callParent(); //important: call regular 'onRender' here or at the start of the foo
}
});
不隶属于 StackOverflow