一个简单，丰富的JavaScript文本编辑器，可生成一致的标签？

Question

I'm trying to develop a web application that will allow users to store a small "about me" section on themselves. 我正在尝试开发一个Web应用程序，允许用户在自己身上存储一个小的“关于我”部分。 For simplicity, I want to use a JS-based editor with the typical formatting features, ie. 为简单起见，我想使用基于JS的编辑器和典型的格式化功能，即。 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). 我尝试自己滚动，但我发现contentEditable有一个讨厌的习惯，就是在不同的浏览器中生成不同的标签（例如，有些插入的标签比其他标签更多，有些将不同的段落分成p标签......）出于安全原因，存储原始HTML是不可能的，我发现编写一个可以解释所有这些差异并以标准格式正确存储输出的解析器非常困难（即用\\ n取代每个换行符存储比一个替换操作更困难）。

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. 我想如果你想要一个WYSIWYG编辑器那么就没有办法满足于此。 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: 然而，由于问题是HTML的语义结构，我找到了一个库，它将确保html是语义，简单和干净的：

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

The alternative is what they use here in stackexchange. 替代方案是他们在stackexchange中使用的。 A inputfield where you can place different tags for formating. 一个inputfield，您可以在其中放置不同的标记以进行格式化。 phpBB uses simlar approach with BBCode. phpBB使用simlar方法和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/pagedown/

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

http://www.bbcode.org/ http://www.bbcode.org/

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

Answer 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>

Answer 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. 您可以使用基于JavaScript选择范围API本机创建的丰富编辑器，而不是基于document.execCommand ，它在浏览器中表现不同。

https://github.com/tovic/rich-text-editor 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. 此富文本编辑器旨在用于公共HTML表单，因此适合您。

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> . 编辑器只将两个换行符视为新的<p>部分，将单个换行符视为一个<br> 。 You can easily playing around with them. 你可以轻松地玩它们。

Answer 4

Shield UI的WYSIWYG编辑器也是一个非常好的编辑器。

一个简单，丰富的JavaScript文本编辑器，可生成一致的标签？

问题描述

4 个解决方案

解决方案1
4 2014-07-09 07:32:51

解决方案2
3 2017-05-24 09:42:19

解决方案3
2 2017-05-21 14:52:13

解决方案4
1 2016-08-08 11:15:25

一个简单，丰富的JavaScript文本编辑器，可生成一致的标签？

问题描述

4 个解决方案

解决方案1 4 2014-07-09 07:32:51

解决方案2 3 2017-05-24 09:42:19

解决方案3 2 2017-05-21 14:52:13

解决方案4 1 2016-08-08 11:15:25

解决方案1
4 2014-07-09 07:32:51

解决方案2
3 2017-05-24 09:42:19

解决方案3
2 2017-05-21 14:52:13

解决方案4
1 2016-08-08 11:15:25