PDA

View Full Version : [Solved] HTMLeditor: Improper nested lists+<br> instead of <p>



Rave
7 Aug 2010, 8:43 AM
Hi,

My brother-in-law is creating a report writing tool for me using Ext. I designed the front-end. The report outputs into HTML, then PRINCE.

We're heavily reliant on Ext's HTMLeditor at the moment. But I've realised we have two issues, when using the WYSIWYG view:


Nested lists are not properly formed in the HTML (the parent list is closed too early).
When you start a new paragraph, it uses ...<br /><br />..., rather than ...</p><p>....

The first issue impacts on the report writer, then second issue makes controlling paragraph styles in the final report much harder than it should be.

Has anyone created an extension to overcome these issues?

Is there any other solution you can think of?

I know we could we could integrate a non-ext HTMLeditor but we're trying to keep it all ext.

TIA,

Rave

Condor
7 Aug 2010, 9:34 AM
Somebody posted a hack (http://www.sencha.com/forum/showthread.php?105374-DUPE-1096-Strange-behaviour-of-the-HtmlEditor-in-Google-Chrome...&p=494319#post494319) for the <br> inside <li> (haven't tested it though).

Rave
7 Aug 2010, 10:08 AM
Somebody posted a hack (http://www.sencha.com/forum/showthread.php?105374-DUPE-1096-Strange-behaviour-of-the-HtmlEditor-in-Google-Chrome...&p=494319#post494319) for the <br> inside <li> here (haven't tested it though).

I'm not a coder and I know very little about Ext, but I've read that hack (before I posted) and it's not talking about the same thing.

The two improper coding issues I mentioned are not related.

I'll expand on the nested lists issue a little. Let's say we're trying to create nested lists as shown (the numbers are there to help show the desired formation of lists:



1

1.1
1.2


2

This is the HTML Ext produces. The red/bold closing </li> is in the wrong place:
<ul>
<li>1</li>
<ul>
<li>1.1</li>
<li>1.2</li>
</ul>
<li>2</li>
</ul>

It should produce the following. The green/bold closing </li> is now correct:
<ul>
<li>1
<ul>
<li>1.1</li>
<li>1.2</li>
</ul>
</li>
<li>2</li>
</ul>

GoogleDocs does the same as Ext on the issue of nested lists. I have found a WYSIWYG editor below that does the job, but like I say, the reason I'm posting is because we want to use an Ext solution.

It also uses <p> to start new paragraphs instead of <br /><br />
http://files.wymeditor.org/wymeditor/trunk/src/examples/01-basic.html

Rave
9 Aug 2010, 4:53 AM
I found three XHTML editors, only the first is an Ext community extension (or whatever you want to call it).

My developer thinks that these actions/issues (e.g. list indent) are a browser function, not an Ext function. So although the issue occurs within an Ext field, it's not Ext's fault.

My developer is probably going to try and override the browser functions, rather than ripping out the Ext field and replacing it with one of the following....


http://blogs.byte-force.com/xor/tinymce/index.html (Ext plug-in, uses TinyMCE)
http://files.wymeditor.org/wymeditor/trunk/src/examples/01-basic.html
http://www.xstandard.com/ (can't find a demo so can't see if it resolves the issues above, probably does)

Condor
9 Aug 2010, 4:57 AM
HTMLEditor was never meant to be a full blown WYSIWYG editor.

If these are the only issues you have a problem with then you could indeed try to patch HTMLEditor, but if you want even more editing features then using something like TinyMCE wouldn't be a bad choice.

netslayer
20 Sep 2010, 6:00 PM
I'm looking for the same fix to change an enter key press from writing a <br><br> to write a <P> instead. I've tried overriding fixKeys with a else statement for the other browsers where it writes <p> for an enter key press but I am still seeing <br>'s.

When I include this after the extjs includes, initialize a HtmlEditor on the page, then hit return on the textarea and view the source it shows <br>. Any ideas? I'm on firefox and the else does output "key press is something else" but not the "other enter" console debugging I have in there..


Ext.override(Ext.form.HtmlEditor, {
fixKeys : function(){
console.log('key press');
if(Ext.isIE){
console.log('is ie');
return function(e){
var k = e.getKey(),
doc = this.getDoc(),
r;
if(k == e.TAB){
e.stopEvent();
r = doc.selection.createRange();
if(r){
r.collapse(true);
r.pasteHTML('&nbsp;&nbsp;&nbsp;&nbsp;');
this.deferFocus();
}
}else if(k == e.ENTER){
console.log('ie enter');
r = doc.selection.createRange();
if(r){
var target = r.parentElement();
if(!target || target.tagName.toLowerCase() != 'li'){
e.stopEvent();
r.pasteHTML('<p />');
r.collapse(false);
r.select();
}
}
}
};
}else if(Ext.isOpera){
console.log('is opera');
return function(e){
var k = e.getKey();
if(k == e.TAB){
e.stopEvent();
this.win.focus();
this.execCmd('InsertHTML','&nbsp;&nbsp;&nbsp;&nbsp;');
this.deferFocus();
}
};
}else if(Ext.isWebKit){
console.log('is webkit');
return function(e){
var k = e.getKey();
if(k == e.TAB){
e.stopEvent();
this.execCmd('InsertText','\t');
this.deferFocus();
}else if(k == e.ENTER){
console.log('webkit enter');
e.stopEvent();
this.execCmd('InsertHtml','<p /><p />');
this.deferFocus();
}
};
}
else {
console.log('is something else');
return function(e){
console.log(e);
var k = e.getKey();
if(k == e.TAB){
e.stopEvent();
this.execCmd('InsertText','\t');
this.deferFocus();
}else if(k == e.ENTER){
console.log('other enter');
e.stopEvent();
this.execCmd('InsertHtml','<p /><p />');
this.deferFocus();
}
};
}
}()

});



Hi,

My brother-in-law is creating a report writing tool for me using Ext. I designed the front-end. The report outputs into HTML, then PRINCE.

We're heavily reliant on Ext's HTMLeditor at the moment. But I've realised we have two issues, when using the WYSIWYG view:


Nested lists are not properly formed in the HTML (the parent list is closed too early).
When you start a new paragraph, it uses ...<br /><br />..., rather than ...</p><p>....

The first issue impacts on the report writer, then second issue makes controlling paragraph styles in the final report much harder than it should be.

Has anyone created an extension to overcome these issues?

Is there any other solution you can think of?

I know we could we could integrate a non-ext HTMLeditor but we're trying to keep it all ext.

TIA,

Rave

Rave
21 Sep 2010, 12:21 AM
Please do keep this thread updated with any progress. For the first build of our system we've stuck with the Ext HTMLeditor but this is an issue that needs resolving at some point. I'd just planned that at some point we'd move to TinyMCE.