Any contenteditable helper plugins for Firefox/Webkit ?

Question

Hey all, I'm currently working to build a CMS for a client where the editing page looks exactly like the rendered page.

Hence I don't want an iframe based WYSIWYG, I am looking for something of a wrapper for contenteditable which irons out the differences between Firefox and Webkit.

For instance an "Enter key press" in Firefox results in a
tag while the same event in Webkit results in it being enclosed in a tag.

If you don't have suggestions for an editor, then can you help me solve this problem ? The way I fixed it first was to check the onkeyup event and then use the execCommand "undo" and then insertHtml "< br/>"

That works fine, but the problem is if the user is in a list, and they press enter they expect to have a next list element created but end up with a line break. How do I detect what's the location of the caret when the enter key is being fired so that I can skip the < br/> insertion behavior ?

Ideally I wouldn't even want a < br/> rather the text block to be encapsulated in a < p> tag for SEO purposes, but I wasn't able to solve that as well.

Any help would be greatly appreciated !

Answer 1

There are lots of niggly little differences between the browsers when it comes to content editing. I don't know of any library that irons out all the differences and I suspect that anyone writing such a library would simply write a browser-based WYSIWYG editor. That being the case, your best bet is probably to look at how the big open source editors such as TinyMCE and CKEditor do it.