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

javascript html text editor

25,254

Solution 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)

Solution 2

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.com/4.6.2/standard-all/ckeditor.js"></script>
</head>

<body>

    <textarea cols="80" id="editor1" name="editor1" rows="10" >&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;
    </textarea>

    <script>
        CKEDITOR.replace( 'editor1', {
            height: 260,
            width: 700,
        } );
    </script>
</body>

</html>

Solution 3

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.com/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.

Solution 4

Shield UI's WYSIWYG Editor is also a very good editor.

View more solutions

25,254

Author by

Admin

Updated on May 25, 2020

Comments

Admin almost 4 years

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! ^^