javascript - 满足的状态

Question

满足状态

所见即所得编辑器制作的标记非常糟糕。它充斥着样式属性，通常甚至不是有效的 HTML(缺少结束标记、样式重叠等)。对于 contenteditable 引入的问题，是否有任何既定的解决方案？如果没有，我该如何着手创建一个？

无效的 HTML

例如，在一个流行的富文本编辑器中输入一个无序列表和一行文本后，我会看到以下 HTML:

<ul><li>foo</li><li>bar</li></ul><div>baz

div 标签是从哪里来的？为什么不关闭？为什么不是一个段落 - 当然是正确关闭？这是可以预防的吗？

非语义 HTML

另一位编辑制作了以下内容:

<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 0pt 36pt; text-indent:-18pt"><span style="color:#000000; font-family:Arial; font-size:11pt; font-style:normal; font-weight:normal; text-decoration:none">●</span><span style="font:7.0pt &#39;Times New Roman&#39;">     </span><span style="color:#000000; font-family:Arial; font-size:11pt; font-style:normal; font-weight:normal; text-decoration:none">Lorem</span></p><p style="font-size:11pt; line-height:115%; margin:0pt 0pt 0pt 36pt; text-indent:-18pt"><span style="color:#000000; font-family:Arial; font-size:11pt; font-style:normal; font-weight:normal; text-decoration:none">●</span><span style="font:7.0pt &#39;Times New Roman&#39;">     </span><span style="color:#000000; font-family:Arial; font-size:11pt; font-style:normal; font-weight:normal; text-decoration:none">ipsum</span></p>

这是有效的标记，但它在语义上很糟糕!编辑器插入了文字 元素符号字符，而不是样式化的无序列表。作为一名开发人员，我不知道如何处理 contenteditable 生成的标记。就样式而言，它完全没用。

替换

直到最近，我一直在使用 Markdown 作为从用户那里生成语义正确的 HTML 的工具。但是，Markdown 缺少我的用户要求的某些功能(非技术人员的易用性、图像定位等)。在寻找能够生成有效的语义标记的所见即所得编辑器数周后，我发现 contenteditable 使这成为不可能。有人在某个地方谈论这些问题的解决方案吗？我怎样才能参与。

[更新] 澄清

我想我之前并没有完全清楚。我不是在寻求解决 contenteditable 问题的方法。我发现了很多，包括下面提到的大部分。我试图找到的是这些问题的根本原因。为什么 contenteditable 如此糟糕？是由于技术问题还是遗留代码问题？此外，正在采取什么措施来修复它以及这项工作在哪里完成？

[更新] Google 文档

上面第二个示例中的 HTML 来自 Google 文档编辑器。然而，作为AlfonsoML下文指出，Google 文档在其编辑器中未使用 contenteditable。解释了他们的技术 here .

Answer 1

我怀疑它处于当前状态有几个具体原因:

1.) 定义它的 HTML5 标准没有定义它应该输出什么，让每个实现自己决定。

2.) 编辑器不知道你想要准确的表示还是语义的表示。这些通常是权衡取舍。

3.) 看起来 Mozilla 将其旧的 Netscape Mail/Composer 代码拖到其 designMode 实现中，然后将其拖到 contentEditable 中。它仍然使用与 10 年前相同的虚线轮廓和红色小 handle ，我怀疑其中有大量遗留代码。

4.) 看起来 Internet Explorer 做的几乎一样，而 IE 从一开始就没有做任何正确的事情。它仍然以怪癖和“兼容”模式的形式拖着它的遗产。

5.) 它实际上仅用于 CMS 系统和论坛/评论框，并且通常这些系统对实现进行了相当繁重的包装。我没有在其他地方看到太多用法，尤其是“基本”用法。

6.) 成功的在线文字处理器很少，所见即所得或页面布局应用程序更少。创建准确的编辑器的压力并不存在。更糟糕的是，Microsoft 销售的离线软件(如 Word 和 Expressions)肯定会受到在线编辑器(尤其是高质量的免费编辑器)增长的损害。

7.) Microsoft 拥有创建工具的传统，这些工具会生成无效和臃肿的 HTML 代码，这些代码今天仍然存在于 Outlook 2010 和 Office 套件中。

8.) 有时，相同的选择和编辑命令可能适用于占据相同空间的多个可能对象，而编辑器永远无法真正知道您要更改哪个。此外，编辑命令可能会导致元素以未定义或意外的方式拆分(同样，它不会知道您更喜欢哪个)。

我认为 contentEditable 永远不会像剪切您自己的 HTML 或使用专用工具一样好。我只专注于对结果运行一些基本的 cruft/修复工具(如 HTMLTidy)，然后就此结束。