HtmlEditor SourceEdit should be disabled by default

[jcwatson11]

Hello all,

I think it might be a good idea to wait to enable the sourceedit toolbar button in the HtmlEditor until the editor is initialized. I ran into an error where the HtmlEditor will resize itself to about 50px high (width apparently not affected) when the source edit button is clicked.

Here's my code and steps for how to reproduce.



// construct the editor and apply it to email_body field.
var ebody_editor = new Ext.form.HtmlEditor({name: 'email_body',value: ''});
ebody_editor.on("initialize",function () {
var resizer = new Ext.Resizable(ebody_editor.getResizeEl(),{handles:"e,s,se",minWidth:600,minHeight:300});
ebody_editor.getResizeEl().on('resize',function() {
ebody_editor.setSize(ebody_editor.wrap.getSize());
});
});
ebody_editor.on("editmodechange",function () {
ebody_editor.setSize(ebody_editor.wrap.getSize());
});
ebody_editor.on("activate",function() {
if(ebody_editor.getValue()=='') {
ebody_editor.setValue('');
}
});
ebody_editor.applyTo('email_body');



Create a button on the page that will enter text into the HtmlEditor before it is initialized.
Create a textarea HTML element on your page with a name and id of email_body.
Use my code to turn the text area into an HtmlEditor with resizable features.
Use your button to add your text to the HtmlEditor before the HtmlEditor is clicked/initialized.
Now click on the sourceedit button. If it works like mine on IE 7, the HtmlEditor will resize itself to about 50px high.


Simply disabling the sourceedit button by default, and then initializing it when the HtmlEditor is initialized would fix this problem.

I found the code in the source in the definition for the onRender function definition:


this.tb.items.each(function(_15){if(_15.id!="sourceedit"){_15.disable();}});

If this line were changed to:


this.tb.items.each(function(_15){_15.disable();});

the problem would be gone.

Just out of curiosity, it appears that the code editor button is intentionally left enabled. I'm guessing there must be a reason. But it escapes me.

BTW: I'm using Ext1.1

Alternatively, I suppose the real question is, why does the component resize when the sourceedit button is clicked? Maybe that's the real fix. Come to think of it, in an ideal world, there should be no reason the source edit button *shouldn't* be available, except to fix this bug.

[mystix]

pls refer to 8887 point no. 6

thanks ;)

[jcwatson11]

pls refer to 8887 point no. 6

thanks ;)

This is very helpful! I suppose I should have done some reading on how to post bugs.

... I especially like this item from 8887...

you will turn red and pee in your pants when someone points you in the direction of thread no. 8887

And I'm sure I'm not the first to get a chuckle out of it.

Anyway, thanks again... whenever I figure out how to do a stack-trace, I'll update my thread.

[mystix]

glad you enjoyed the read :).

actually, all you need to do is to replace ext-all.js with ext-all-debug.js and find the appropriate lines there instead.

[jcwatson11]

Hi Mystix,

Thanks for your help. Can you point me to some document that gives an introduction to how to use the ext-all-debug.js script. I have replaced it and I'm using it in my page, and I remember reading somewhere that I can do CTRL+SHIFT+Home to bring up the console. But what then? Nothing displays in the console.

Thanks again.

[mystix]

ext-all-debug.js is just the un-minified version of ext-all.js
for ease of debugging, you should use this file when developing.

when reporting bugs, you should refer to line numbers in ext-all-debug.js instead of ext-all.js.

in this case, you'll need to find the equivalent of


this.tb.items.each(function(_15){if(_15.id!="sourceedit"){_15.disable();}}); // code you found in ext-all.js

in ext-all-debug.js, and let us know which line it's on. there's no need for the debugging console for now.


p.s. you don't have to hunt anymore.
i found the matching code starting from line 23179 of ext-all-debug.js for Ext 1.1 final


this.tb.items.each(function(item){
if(item.id != 'sourceedit'){
item.disable();
}
});