WYSIWYG - contenteditable clean the output

Hi guys,

I've just been adding a really simple WYSIWYG editor and I've come across a problem with consistent output between browsers.

When I view the source there seems to be weird markup in there and some use different elements. For example when pressing return. Some browsers add <br> tags, others wrap in p and some in divs.

I was wondering what is the best way to filter this in javascript. I am submitting this content to a database to display on the front end so I want to make sure its clean and consistent.

Thanks

Hi,

is there any reason why you need to make your own editor? I mean, there are literally hundreds of them out there in every flavor. And as far as I can tell, they've solved this problem already.

Yeah I was thinking I was going to get this response. To be honest I just don't want to included other things because they tend to have bloat. Things I would never use that I would need to spend time to strip them out.

What basic functionality do you actually need? Most editors allow you to modify their toolbar pretty easily. If you're thinking about building your own editor, take a look at the blog post below about contenteditable and why you probably don't want to take this approach. The basic premise is that building your own editor is easy, but building one that works well is really, really, really hard.

snapeditor.com/blog/posts/see-how-easily-you-can-make-web-content-editable

(Sorry, I can't post URLs yet)