Html 一个可以生成一致标签的简单、丰富的 JavaScript 文本编辑器？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17688993/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
A simple, rich JavaScript text editor that produces consistent tags?
提问by user2589389
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.
我正在尝试开发一个 Web 应用程序，该应用程序将允许用户在自己身上存储一个小的“关于我”部分。为简单起见，我想使用具有典型格式化功能的基于 JS 的编辑器，即。粗体、斜体、下划线、不同的字体大小和颜色等。
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 有在不同浏览器中生成不同标签的坏习惯（例如，有些插入的 br 标签比其他的多，有些将段落拆分为不同的 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! ^^
提前致谢！^^
回答by Arne H. Bitubekk
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:
我想如果你想要一个所见即所得的编辑器，那么就没有办法绕过 contenteditable。然而，由于问题是 HTML 的语义结构，所以我找到了一个库，它可以确保 html 是语义的、简单的和干净的：
https://jakiestfu.github.io/Medium.js/
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:
另一种选择是他们在 stackexchange 中使用的。一个输入字段，您可以在其中放置不同的标签以进行格式化。phpBB 使用与 BBCode 类似的方法。您将需要一个解析器服务器端，如果找不到，您可能必须编写它。更多信息：
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#)
回答by Lokesh Das
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" ><p>This is some <strong>sample text</strong>. You are using <a href="http://ckeditor.com/">CKEditor</a>.</p>
</textarea>
<script>
CKEDITOR.replace( 'editor1', {
height: 260,
width: 700,
} );
</script>
</body>
</html>
回答by Taufik Nurrohman
You can use my rich editor that is created based on JavaScript selection range API natively, and not based on document.execCommandwhich 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).
我发现编写一个可以解释所有这些差异并以标准格式正确存储输出的解析器非常困难（即，用 \n 替换每个换行符进行存储比一个替换操作更困难）。
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.
编辑器简单地将两个换行符视为新<p>节，将单个换行符视为<br>. 您可以轻松地玩弄它们。
回答by Vladimir Georgiev
Shield UI's WYSIWYG Editoris also a very good editor.
Shield UI 的所见即所得编辑器也是一个非常好的编辑器。
