PDA

View Full Version : Split out HtmlEditor: Separate toolbar, Separate Editor



ZeusTheTrueGod
20 Sep 2010, 10:56 AM
Hi All

I want to insert an html editor but move his toolbar panel to another place.

******************************************
* TOOLBAR1 | TOOLBAR2 | HTML EDITOR TOOLBAR HERE
******************************************
*
* OTHER COMPONENTS ARE HERE
*
******************************************
*
* HTML EDITOR ITSELF IS HERE
******************************************

I tried different things -
a) read its source and rewrite createToolbar, updateToolbarItems,disableToolbarItems - so no toolbar is created
, but later add my own. This leads me to rewring and copy pasting of too big amount of source code. Mine becomes unmaintainble
b) Move the panel from already rendered component. No luck, with both anchorTo and remove/add component. I am not sure
if that is possible to move DOM of already rendered components

The other bad thing is that toolbar of HtmlEditor is used during onResize event, so I will have to rewrite this handler or create iterceptor which fakes it with zero-sized toolbar

Can anyone help me?

ZeusTheTrueGod
21 Sep 2010, 1:10 AM
Ok, no one helped me, and I almost finished what I wanted to do, so here is the basic ideas, then I will post the whole solution as the component or plugin

The solution was to override functions which are responsible for toolbar generation / toolbar status changing

createToolbar,
updateItems,
disableItems

createToolbar is overriden so it renders an empty toolbar which is hidden asap.

updateItems and disableItems first check that
a) someone asked to create a real toolbar
b) that real toolbar is already rendered

in case of false they just exit, but when it is true I do substitution like this
var tb = this.tb
this.tb= this.realTb
Ext.form.HtmlEditor.prototype.updateItems.apply(this,arguments)
this.tb = tb

and also I add the method which creates a normal toolbar but without renderTo: parameter so it can be assigned to something else

This idea allows me to separate the HtmlEditor from its Toolbar and I can create that External Toolbar when I want

ericd
9 Nov 2010, 4:17 AM
Were you able to make some headway on this? Just starting on something that needs this exact functionality and saw your thread.

Thanks