HTMLeditor

[dolittle]

I`ve started extending the editor and it works great but I run into several issues.
Some of them might be browser bugs.

1. On FF when the range is collapsed and I try to hilite text it adds:

<font bgcolor="FFFF00">
but when the range is not collapsed it adds

<span style="background-color: rgb(255, 255, 0);">

I don`t care too much about the different tags but on the first case you don`t see the effect of hiliting. Another issue is that FF adds unnecessary nesting of elements when using hilite. Works fine on IE7.

I`ve reported the following issues on the past but it seems they are forgotten:
2. On the first time the editor gets focus it adds a single space.
3. Lists and align text are broken on IE7. Works fine with FF.

Thanks

[KRavEN]

I've duplicated problems 2 and 3 running ext 1.1 RC1.

I have another problem to add to the list:

4. Italics don't work in IE6. The editor window shows the characters in italics but when they get posted and read back out of the database they are not italics in IE6 or Firefox. If I submit italic text from the same page with firefox the text is in italics when read out of the database and displayed in either Firefox or IE6.

[galdaka]

more bugs:

http://extjs.com/forum/showthread.php?p=49202#post49202

[jack.slocum]

2. The single space is so you can see the cursor. Without it, FireFox refuses to display the cursor when clicking on an empty editor. If you have an alternate solution, I am all ears. :)

3. is already fixed in SVN.

4. It is probably using the EM tag. You will have to configure the container where you are displaying the text to make EM elements italic. reset.css (in ext-all.css) removes italic from the EM tag. It's pretty easy:

#some-element em { font-style: italic; }

[stever]

2. The single space is so you can see the cursor. Without it, FireFox refuses to display the cursor when clicking on an empty editor. If you have an alternate solution, I am all ears. :)

Set the value to the space, then set the value back to blank. Works on my hacked up version at least...

[jack.slocum]

I tried that in onFirstFocus and ended up with no cursor. Care to share any more details on your "hacked up version"? :)

[stever]

Well, I use this and it works fine for me .... :)


pushValue : function(){
if(this.initialized){
var v = this.el.dom.value;
//if(v.length < 1){
// v = '&nbsp;';
//}
if(this.fireEvent('beforepush', this, v) !== false){
(this.doc.body || this.doc.documentElement).innerHTML = v;
this.fireEvent('push', this, v);
}
}
},
onFirstFocus : function(editor){
.
.
.
if(Ext.isGecko){ // prevent silly gecko errors
var v = this.el.dom.value;
if(v.length < 1){
this.setValue('&nbsp;');
this.setValue('');
}


BTW: I think it looks better if you hide the textarea itself until stuff is done and then show it when initialization is done so you don't see the value stored in it moved all around while the toolbar is built, etc.

Also, I get weird things when I try and set its width to 98% or the like. The wrapper, the toolbar, and the textarea are fine, but the iframe is stuck at one preset size.

Also, if the form gets resized, the HtmlEditor does not... (width issue)

As for the above two items: if I choose to switch back and forth from source view to wysiwyg, then the iframe gets resized correctly.

[jack.slocum]

I tried that change, and I had no cursor. :(

[stever]

OK, I had to rip everything out one by one until I found it. Of course, it was the last thing I checked. Anyhow, I added a resizer to it to stretch the bottom. That has the pleasant side effect of not having the need for the space. I don't know why, but removing the resizer also means a lost cursor. ??? So be it. I'm sure you can figure out what the resizer does to have this effect. BTW: with a lot of content, the scroll bar arrow gets hidden just a bit by the resizer. Any idea why?

Shortened version (also can have a width:'100%' and stretch like a normal input field without having to watch for resizing events, etc.):


/**
* @class Ext.ux.HtmlEditor
* @extends Ext.Component
* Simple class to put a smiley menu in an HTML editor.<br />
* @constructor
* Create a new HtmlEditor
* @param {Object} config The config object
*/
Ext.namespace('Ext.ux');
Ext.ux.HtmlEditor = function(config){
Ext.ux.HtmlEditor.superclass.constructor.call(this, config);
if (config.width && typeof config.width != 'number')
this.pWidth = config.width;
var Me=this;
this.on('initialize', function(){
new Ext.Resizable(Me.getResizeEl(), {
handles: 's',
pinned:true,
minWidth:350,
minHeight: 250,
resizeElement: function(){ // override default resizing
var size = this.proxy.getSize();
Me.setSize(Me.pWidth?Me.pWidth:size.width, size.height);
return size;
}
});
});

}

Ext.extend(Ext.ux.HtmlEditor, Ext.form.HtmlEditor, {
/**
* @cfg {Boolean} enableColors Enable the fore/highlight color buttons (defaults to true)
*/
enableSmileys : true,

defaultAutoCreate : {
tag: "textarea",
style:"width:500px;height:300px;",
autocomplete: "off",
cls: "x-hidden"
},

pushValue : function(){
if(this.initialized){
var v = this.el.dom.value;
//if(v.length < 1){
// v = '&nbsp;';
//}
if(this.fireEvent('beforepush', this, v) !== false){
(this.doc.body || this.doc.documentElement).innerHTML = v;
this.fireEvent('push', this, v);
}
}
},

// private
onResize : function(w, h){
Ext.ux.HtmlEditor.superclass.onResize.apply(this, arguments);
if(this.el && this.iframe){
if(typeof w != 'number')
this.iframe.style.width = w;
if(typeof h != 'number')
this.iframe.style.height = h;
}
}

});

[jack.slocum]

I'm not sure what the resizer is doing to enable the cursor. How odd. I will take a look at see what I can figure out.

[Matt]

Stever -

Thanks so much for that fix on the spacing! I was having that same problem but now I'm good to go! Thanks again!

[sleepyhead]

Will the single space bug in IE be fixed in the next version? If so, when is it due for release? We are currently using Telerik radEditor in our e-mail module. It works great - I did a lot of research and found it to be the best, but it is a bit slow. So now I really want to release the Ext HTMLEditor to our users.