如何将contentEditable转换为结构化标记编辑器？

Question

LyX和这样的编辑器试图确保您编写具有不同结构的文本.我想从html5 contentEditable字段中获得相同的行为,除了我不知道如何.

我的要求:

• 没有创建DIV -tags.
• 文本容器外不允许使用文本.(段落,标题,预编组和内联元素)

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

(我也会喜欢关于我可以为一个满足的领域做的事情的好文档)

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>可信)来构建文本内容的数组,然后将其发布到服务器.使用jQuery很容易做到这一点(可根据要求为此提供进一步的帮助).