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, ...)
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.
You also can use ExtJS.ux.HtmlEditor.Plugins : https://github.com/VinylFox/ExtJS.ux.HtmlEditor.Plugins
In addition to @proton great answer above, there's another way to insert buttons to the toolbar, different from adding them to the end. In my answer i'll write it as a new control named 'RichTextBox' (and not as a plugin) but this can be done in any other way:
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
}
});