生成一致标签的简单、富 JavaScript 文本编辑器？答案

【问题标题】：A simple, rich JavaScript text editor that produces consistent tags?生成一致标签的简单、富 JavaScript 文本编辑器？
【发布时间】：2013-07-17 00:06:23
【问题描述】：

我正在尝试开发一个网络应用程序，它允许用户在自己身上存储一个小的“关于我”部分。为简单起见，我想使用具有典型格式化功能的基于 JS 的编辑器，即。粗体、斜体、下划线、不同的字体大小和颜色等。

我尝试自己滚动，但我发现 contentEditable 有一个讨厌的习惯，即在不同的浏览器中生成不同的标签（例如，有些插入的 br 标签比其他标签多，有些将段落分成不同的 p 标签......），并且由于出于安全原因存储原始 HTML 是不可能的，我发现编写一个可以解释所有这些差异并以标准格式正确存储输出的解析器非常困难（即，将每个换行符替换为\n 存储比一次替换操作更困难）。

那么，是否有任何文本编辑器可以在大多数/所有现代浏览器中工作，更重要的是，在每个浏览器中生成相同的标签，以便我可以以相同的方式解析它们？

提前致谢！ ^^

【问题讨论】：

你可以在后端按摩html或者使用markdown解析器。
根据最接近的原因，“要求我们推荐或查找工具、库或最喜欢的场外资源的问题对于 Stack Overflow 来说是无关紧要的，因为它们往往会吸引固执己见的答案和垃圾邮件。”

标签： javascript html text editor

【解决方案1】：

我认为，如果您想要一个所见即所得的编辑器，那么就无法使用 contenteditable。然而，由于问题是 HTML 的语义结构，所以我找到了一个库，可以确保 html 是语义的、简单的和干净的：

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

替代方案是他们在 stackexchange 中使用的。一个输入字段，您可以在其中放置不同的标签以进行格式化。 phpBB 使用与 BBCode 类似的方法。您需要一个解析器服务器端，如果找不到，您可能需要编写它。更多信息：

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)

【讨论】：

Medium.js 看起来很有希望，但我不明白你应该如何在动态页面编辑情况下使用它，即我可能为每个元素加载的任何文档都应该在该元素中是可内容编辑的单击它的时间 - 当每个元素变为 contentEditable 时，我是否需要为每个元素创建一个新的媒体？如果是这样，当我不再希望它为 contentEditable 时，如何销毁 Medium 元素？创建/销毁这么多实例有问题吗？
似乎您只能将一个元素添加到新的 Medium 而不是一个集合，所以我认为没有办法不必为每个元素都添加新的。您可以像这样在 JS 中设置 contentEditable： document.getElementById("myP").contentEditable = false; （来源：w3schools.com/jsref/prop_html_contenteditable.asp）。如果您将其作为问题发布，您可能会得到更好的答案

【解决方案2】：

非常简单，不会产生任何脚本冲突：

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

【讨论】：

【解决方案3】：

您可以使用我基于 JavaScript 选择范围 API 原生创建的富编辑器，而不是基于在不同浏览器中表现不同的 document.execCommand。

https://github.com/tovic/rich-text-editor

此富文本编辑器设计用于公共 HTML 表单，因此非常适合您。

我发现编写一个可以解释所有这些差异并以标准格式正确存储输出的解析器非常困难（即，用 \n 替换每个换行符进行存储比一次替换操作更困难） .

编辑器只是将两个换行符视为新的<p> 部分，将单个换行符视为<br>。您可以轻松地与他们玩耍。

【讨论】：

【解决方案4】：

Shield UI 的WYSIWYG Editor 也是一个很不错的编辑器。

【讨论】：