ExtJS: добавить кнопку в htmleditor
Я использую ExtJS, и у меня есть htmleditor в моей форме. Я хотел бы добавить пользовательскую кнопку к этому элементу (например, после всех других кнопок, таких как выравнивания, вес шрифта,...). Эта кнопка должна в основном вставлять стандартный шаблон в htmlfield. Будучи этим шаблоном html, поведение кнопки должно быть таким
- переключиться в режим HTML (например, при нажатии кнопки Source)
- вставить что-то
- вернуться в режим WYSIWYG (например, при повторном нажатии кнопки "источник")
Спасибо за внимание
3 ответов
вам не нужно переключаться в режим HTML. Просто используйте insertAtCursor
функция с шаблоном HTML.
Я сделал этот простой пример, как добавить кнопку, которая вставляет горизонтальную линейку (<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/
но я действительно рекомендую вам проверить HtmlEditor.Плагины (или ateodorescu / mzExt для ExtJS 4). Там вы можете найти гораздо больше о добавлении пользовательских кнопок, например, как включить/отключить кнопки, когда что-то выбрано, поставить разделители и т. д.
вы также можете использовать ExtJS.ux.HTML редактор.Плагины : 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
}
});