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
But I really recommend you to see the project HtmlEditor.Plugins at google code. 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.
https://docs.google.com/file/d/0B5nZNPW48dpFb0hJVmpVUEphZGc/edit?usp=sharing
- Switch to HTML mode (like when pressing Source button)
- Insert something
- Switch back to WYSIWYG mode (like when pressing the Source button again)
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-custom', //your iconCls here handler: function(){ this.cmp.insertAtCursor('<hr>'); }, scope: this, tooltip: 'horizontal ruler', overflowText: 'horizontal ruler' }]); } }); var w = new Ext.Window({ width: 550, layout: 'fit', items: [{ xtype: 'htmleditor', plugins: [new Ext.ux.form.HtmlEditor.HR()] }] }); w.show();
But I really recommend you to see the project HtmlEditor.Plugins at google code. 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.
https://docs.google.com/file/d/0B5nZNPW48dpFb0hJVmpVUEphZGc/edit?usp=sharing
No comments:
Post a Comment