6

有 LyX 和这样的编辑器试图确保您编写具有独特结构的文本。我希望 html5 contentEditable 字段具有相同的行为，除非我不知道如何。

我的要求：

  • 不创建 DIV -标签。
  • 文本容器外不允许出现文本。（段落、标题、前置块和内联元素）

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

（我也会喜欢关于我可以为 contenteditable 字段做的事情的好文档）

4

1 回答 1

5

以下是元素可编辑的 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>'s，并_moz_dirty=""添加了一个属性。您不需要删除它；如果 Firefox 遵循规范，它永远不会通过在标签之外插入文本来破坏 DOM。但是，请注意，使用 Chrome 和 Firefox 的用户会产生不同的 HTML 结构，您可能希望使用 Javascript 或服务器端清理来平滑这些结构......我也没有这台机器上可用的 IE 来弄清楚它是如何处理的不幸的是，换行符并且微软的文档没有指定。

至于将其推送到服务器，您可以使用 AJAX 通过拉取相关元素的文本内容（或只是使整个<div>内容可编辑）、构建其文本内容的数组，然后将其发布到服务器来实现。使用 jQuery 很容易做到这一点（可以根据要求提供更多帮助）。

于 2010-07-21T15:57:59.903 回答