23

可编辑的状态

所见即所得编辑器生成的标记非常糟糕。它充满了样式属性，通常甚至不是有效的 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">●&lt;/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">●&lt;/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这么破？是因为技术问题还是遗留代码问题？此外，正在采取什么措施来修复它，这项工作在哪里完成？

[更新]谷歌文档

上面第二个示例中的 HTML 来自 Google 文档编辑器。但是，正如AlfonsoML在下面指出的那样，Google Docs 并没有contenteditable在他们的编辑器中使用。他们的技术在这里解释。

4

6 回答 6

11

我怀疑它处于它所处的状态有几个具体原因：

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

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

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

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

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

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

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

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

我不相信 contentEditable 会像剪切自己的 HTML 或使用专用工具一样好。我只是专注于在结果上运行一些基本的 cruft/repair 工具（如 HTMLTidy），然后就结束了。

于 2010-08-11T15:09:48.980 回答
4

这是一个困难的问题，每个人解决的方式都不一样。

我知道以下可能性：
* 放手吧（最糟糕的一个）
* 尝试自己修复 HTML（TinyMCE 和 CKEditor 尝试以不同的成功率做到这一点）
* 使用 XStandard 之类的插件
* 使用 DOM tom 制作你的自己的编辑器 - 用 DIV 制作插入符号，自己处理选择、编辑和一切。例如，这就是谷歌的做法。不过，这需要大量编码。

于 2010-07-30T20:23:51.220 回答
1

对于支持 的浏览器，contenteditable可以很容易地找到解决方案；使用例如jQuery 来保存数据，并将新元素附加到可编辑的内容（显然是带有按钮），只需很少的努力即可获得一个简单的 WYSIWYG 编辑器。

一个可能更难解决的问题是确保这些新元素的放置是正确的。但是，这已经为 Webkit 解决了，我相信在其他浏览器中也可以这样做。

使用的编辑器contenteditable既易于部署又轻巧，这绝对是值得开发的东西，恕我直言。

编辑：重新阅读您的问题后，我意识到您实际上是在寻找一个有效的非contenteditable解决方案。我不知道为什么；AFAIKcontenteditable产生有效的标记，如果你完全控制（只允许用户通过你的 UI 插入元素和更改它们的属性），它也将是语义的。AFAIK 目前没有所见即所得的编辑器使用contenteditable，但我可能是错的。

于 2010-07-30T20:29:56.107 回答
1

我认为您的问题是尝试使用之前评论中所述的 Google Docs 之类的工具，而不是真正专注于编辑 HTML 的工具。

是的，这两种都是所见即所得，但我不认为 GDocs 的目的是生成漂亮的 HTML，而是专注于提供 MS Word 的替代方案，即使他们必须一路创建奇怪的 HTML。

我真的不敢相信你已经研究了好几个星期，而且你还没有使用 CKEditor 或 TinyMCE。这两种解决方案都包括使用属性、类或样式作为输出的选项，只需查看示例、阅读一些文档并根据您的需要进行调整。

于 2010-07-31T09:25:15.443 回答
1

我在Content Editable Text Editors中回答了非常相似的问题- 为什么情况会这样，以及我们作为所见即所得编辑器的作者可以做些什么。

是的，我知道这个问题已有 2 年历史，但它仍然是最新的。

于 2013-04-18T19:49:54.213 回答
1

中.js !!

Medium.js 将 HTML 代码保持在contenteditable语义、简单和干净的范围内。Medium.js 还支持占位符、自动 HR（或 BR 或 P）创建、事件、热键、简单和复杂的元素注入等等！

于 2014-07-11T06:55:58.850 回答