Broken lists
So I discovered today that HTMLArea and FCKeditor both suffer from a nasty side effect of edit mode in IE and Mozilla/FF. They produce malformed html when nesting lists.
Let's take FCKeditor, since I would figure it more likely to have caught this issue. If you don't have it installed, then you can take my word for it. I added some pretty pictures—so I can point and say "HA!"
I'll use the default demo page that comes with a fresh installation (circa 10 minutes ago).
Make sure you have access to the Source button.
Use one of the list control buttons to open a list.
Enter values for a couple items, then either hit tab or click the indent button to indent into a nested list. Change the list type, just to reassure yourself that this is in fact a new list. Happy? Let's continue. Add values for a couple items in the nested list. Now shift-tab or use the outdent button to bring yourself back to the next item in your primary list. Enter a few values.
Now click on the Source button to view the source of your content.
Aaaaaaaand.....
Eh? What's this? That
Enter values for a couple items, then either hit tab or click the indent button to indent into a nested list. Change the list type, just to reassure yourself that this is in fact a new list. Happy? Let's continue. Add values for a couple items in the nested list. Now shift-tab or use the outdent button to bring yourself back to the next item in your primary list. Enter a few values.
Now click on the Source button to view the source of your content.
Aaaaaaaand.....
Eh? What's this? That UL isn't in an LI tag. I'm pretty sure that's not according to spec.
Also I noted that HTMLArea (at least the 2.x version installed in the application I work on) has a nasty habit of prefixing any content preloaded from the linked textarea with empty P tags. I'm not sure if this is an artifact of our particular usage, but I figure it's worth noting. So if you have an application that manages content via HTMLArea, you might want to update
(something)._textArea.value = editor.getHTML();to*I can't recall the object variable name. This is all out of my lacking short term memory
var html = editor.getHTML(); (something)._textArea.value = html.replace(/^(\s*<p ?\/>)*/gi, '');Or better yet, add the empty
P tag regex to the other collected HTMLArea.[something]_RE = /blah blah/i declarations earlier in the code.