6

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

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

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

提前致谢！^^

4

4 回答 4

6

我认为如果你想要一个所见即所得的编辑器，那么就没有办法解决 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)

于 2014-07-09T07:32:51.850 回答
3

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

<!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>
于 2017-05-24T09:42:19.660 回答
2

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

富文本编辑器

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

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

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

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

于 2017-05-21T14:52:13.900 回答
1

Shield UI 的所见即所得编辑器也是一个非常好的编辑器。

于 2016-08-08T11:15:25.317 回答