A simple, rich JavaScript text editor that produces consistent tags?

Question

I'm trying to develop a web application that will allow users to store a small "about me" section on themselves. For simplicity, I want to use a JS-based editor with the typical formatting features, ie. bold, italics, underline, differing font sizes and colors, etc.

I tried to roll my own, but I found that contentEditable has a nasty habit of producing different tags in different browsers (for example, some insert more br tags than others, some split the paragraphs into p tags differently...), and since storing raw HTML is out of the question for security reasons, I've found it insanely difficult to write a parser that can account for all of these differences and store the output correctly in a standard format (ie. replacing every newline with \n for storage is more difficult than one replace operation).

So, are there any text editors out there that work in most/all modern browsers, and more importantly, produce the same tags in every browser so I can parse them all the same way?

Thanks in advance! ^^

Answer 1

I think if you want a WYSIWYG Editor then there's no way around contenteditable. However as the issue is the semantic structure of the HTML then I found a library which will ensure the html is semantic, simple, and clean:

https://jakiestfu.github.io/Medium.js/

The alternative is what they use here in stackexchange. A inputfield where you can place different tags for formating. phpBB uses simlar approach with BBCode. You'll need a parser server side which you might have to write if you can't find one. More info:

https://code.google.com/p/pagedown/

https://code.google.com/p/markdownsharp/ (C#)

http://www.bbcode.org/

http://webcheatsheet.com/javascript/bbcode_editor.php (PHP)