html - 如何将 contentEditable 变成结构化标记编辑器？

Question

LyX 和此类编辑器试图确保您编写的文本具有独特的结构。我想从 html5 contentEditable 字段中获得相同的行为，但我不知道该怎么做。

我的要求:

• 没有创建 DIV 标签。
• 文本不允许超出文本容器。 (段落、标题、前置 block 和内联元素)

我还需要弄清楚如何遍历内容并将其以受限形式推送到服务器。

(我也喜欢关于我可以为 contenteditable 字段做的事情的好文档)

Answer 1

以下是 DOM 规范中元素可编辑的含义:http://www.w3.org/TR/html5/editing.html#editable

如果我理解您的要求，听起来只需将所有现有的段落标签和标题标签设为内容可编辑即可满足您的需求。如果您希望用户能够插入新的段落和标题，则在编辑时按 Enter 键将插入换行符，如 <br>。 Chrome 中的标签，但如果用户输入 HTML 标签，它们将被转义并仅显示为文本。至于插入其他格式的内容，那完全取决于用户代理；我在 Chrome 中的测试表明它显然不允许用户插入粗体/斜体/等。文本。

编辑:显然在 Chrome 中(并且可能通过扩展，Safari 也是如此)，按 Control-I、Control-B、Control-U 会导致与富文本编辑器相同的行为!

我还在 Firefox 中进行了测试，发现与 Chrome 不同，也并不完全违反规范，它实际上确实插入了新的 <p>标签而不是 <br>的，带有 _moz_dirty=""属性添加上。您不需要删除它；如果 Firefox 遵循规范，它永远不会通过以这种方式在标记外插入文本来破坏 DOM。但是，请注意，使用 Chrome 和 Firefox 的用户会生成不同的 HTML 结构，您可能希望使用 Javascript 或服务器端清理来平滑这些结构......我也没有在这台机器上使用 IE 来弄清楚它是如何处理的不幸的是，换行符和 Microsoft 的文档没有指定。

至于将其推送到服务器，您可以通过提取相关元素的文本内容(或者只是使整个 <div> 内容可编辑)，构建其文本内容数组，然后 POST 来使用 AJAX它到服务器。使用 jQuery 可以很容易地做到这一点(可以根据要求为此提供进一步的帮助)。