Javascript WYSIWYG textarea plugins produce inconsistant results across browsers?

0
votes

I'm in need of a lightweight, Javascript-based, WYSIWYG editor that transforms <textarea>s into Rich Text Editors. There are thousands of these plugins out there (and I feel like I've demoed them all). For reasons outside of my control, I need the editor to produce legacy HTML... so it needs to write <b> instead of <strong> or <span style=...>.

Fine. No problem. There are plenty of these that purport to do just that. Here's the weirdness though: I'm finding that in a ton of these editors that I've played with, they output different things in different browsers! Chrome will output <b> but Firefox will output <span style="font-weight:bold">?!

For example, try applying bold in these editors in both Chrome and Firefox:

http://nicedit.com/

http://freshcode.co/plugins/jquery.contentEditable/demo.html

http://www.gosu.pl/steditor/

http://batiste.dosimple.ch/blog/posts/2007-09-11-1/rich-text-editor-jquery.html

See? <b> in Chrome, but <span style="font-weight:bold"> in Firefox. Weird!

Any ideas?

1
javascriptfirefoxbrowsergoogle-chromewysiwyg
Welcome to browser hell. Every browser interprets the DOM differently, I have done the unpleasant duty of making one of these editors cross compatible with just IE and Firefox and that was a pain. I'm not aware of any really good solutions. – Caimen
Yeah, I've been acquainted with browser hell many times before. This just seems above and beyond browser inconsistency though. Where is the span coming from??? Is Firefox writing it in? – Sam
Yes Firefox is writing it because the javascript is submitting it as DOM objects and Firefox then interperets it and spits out it's own variation. Ideally there should be WYSWIG solutions out that handle this without the browsers help hopefully. – Caimen

1 Answers

1
votes

Instead of searching for the less known editor, you should have started with the most commonly used ones like CKEditor and TinyMCE.

Check this sample in CKEditor: http://nightly.ckeditor.com/latest/ckeditor/_samples/output_html.html