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! ^^
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! ^^
Share Improve this question asked Jul 17, 2013 at 0:06 user2589389user2589389 611 gold badge1 silver badge2 bronze badges 2- you can massage the html on the backend or use a markdown parser. – dandavis Commented Jul 17, 2013 at 0:41
- 1 Per the close reasons, "Questions asking us to remend or find a tool, library or favorite off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam." – Lucas Zamboulis Commented Jul 17, 2013 at 1:43
4 Answers
Reset to default 6I 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./p/pagedown/
https://code.google./p/markdownsharp/ (C#)
http://www.bbcode/
http://webcheatsheet./javascript/bbcode_editor.php (PHP)
It's so simple and doesn't create any script conflict:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="robots" content="noindex, nofollow">
<title>Classic editor with default styles</title>
<script src="http://cdn.ckeditor./4.6.2/standard-all/ckeditor.js"></script>
</head>
<body>
<textarea cols="80" id="editor1" name="editor1" rows="10" ><p>This is some <strong>sample text</strong>. You are using <a href="http://ckeditor./">CKEditor</a>.</p>
</textarea>
<script>
CKEDITOR.replace( 'editor1', {
height: 260,
width: 700,
} );
</script>
</body>
</html>
You can use my rich editor that is created based on JavaScript selection range API natively, and not based on document.execCommand which behaves different accross browsers.
https://github./tovic/rich-text-editor
This rich text editor is designed to be used on public HTML form, so this is suited for you.
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).
The editor simply treat two line break as new <p> section and single line break as a <br>. You can easily playing around with them.
Shield UI's WYSIWYG Editor is also a very good editor.