wysiwyg编辑制作的标记是残酷的。它充斥着样式属性，甚至通常都不是有效的HTML（缺少结束标记，重叠样式等）。对于contenteditable引入的问题，是否有既定的解决方案？如果没有，我该如何创建一个？
例如，在输入无序列表后跟一行文本到热门的富文本编辑器中后，我会看到以下HTML：
<ul><li>foo</li><li>bar</li></ul><div>baz
div标记来自何处？为什么不关闭？为什么不是一个段落 - 当然适当关闭？这是可以预防的吗？
另一位编辑制作了以下内容：
<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 'Times New Roman'"> </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 'Times New Roman'"> </span><span style="color:#000000; font-family:Arial; font-size:11pt; font-style:normal; font-weight:normal; text-decoration:none">ipsum</span></p>
这是有效的标记，但它在语义上太可怕了！编辑器已插入 literal 项目符号字符，而不是样式化的无序列表。作为开发人员，我不知道如何处理标记contenteditable已经产生的。造型方面，它完全没用。
直到最近，我一直使用Markdown作为从用户生成语义正确的HTML的工具。但是，Markdown缺少我的用户要求的某些功能（非技术人员的易用性，图像定位等）。在寻找可以产生有效的语义标记几周的所见即所得编辑器之后，我发现contenteditable使得这不可能。有人在某个地方谈论这些问题的解决方案吗？我怎样才能参与进来。
我想我前面并不完全清楚。我不是在想办法解决contenteditable的问题。我发现了很多这些，包括下面提到的大部分内容。我想要找到的是这些问题的根本原因。为什么contenteditable如此破碎？是由于技术问题还是遗留代码问题？此外，正在采取哪些措施来解决这个问题以及这项工作在哪里完成？
上面第二个示例中的HTML来自Google文档编辑器。但是，正如AlfonsoML指出的那样，Google文档在其编辑器中不使用contenteditable。他们的技术解释为here。
答案 0 :(得分：11)
我怀疑它处于这种状态，原因有几个：
1。）定义它的HTML5标准没有定义它应该输出的内容，而是让每个实现都自己决定。
2。）编辑不知道您是想要准确的表示还是语义表示。这些通常是权衡取舍。
3.）看起来Mozilla将旧的Netscape Mail / Composer代码拖到其designMode实现中，然后将其拖入contentEditable。它仍然使用10年前存在的相同的虚线轮廓和小红色手柄，我怀疑有大量遗留代码。
4。）看起来Internet Explorer几乎完全相同，IE从来没有做过任何正确的事情。它仍然以怪癖和“兼容性”模式的形式拖延其遗产。
5.）它实际上只在CMS系统和论坛/评论框中使用，并且通常这些在实现中具有相当繁重的包装。我没有在其他地方看到太多用法，特别是'裸骨'。
6。）很少有成功的在线文字处理器和更少的WYSIWYG或页面布局应用程序。创建精确编辑器的压力并不存在。更糟糕的是，微软仍在销售像Word和Expressions这样的离线软件，这些软件肯定会因在线编辑器的增长而受到损害，特别是高质量的免费软件。
7。）Microsoft拥有创建工具的遗产，这些工具可生成目前仍存在于Outlook 2010和Office套件中的无效且臃肿的HTML代码。
8。）有时相同的选择和编辑命令可能适用于占用相同空间的几个可能的对象，编辑器无法真正知道您想要改变哪一个。此外，编辑命令可能导致元素以未定义或意外的方式分割（同样，它将不知道您更喜欢哪个）。
我不相信contentEditable会像削减自己的HTML或使用专用工具一样好。我只专注于在结果上运行一些基本的cruft /修复工具（如HTMLTidy），并将其称为一天。
答案 1 :(得分：4)
这是一个难以解决的问题。
我知道以下几种可能性：
*放手（最糟糕的一个）
*尝试自己修复HTML（TinyMCE和CKEditor尝试用各种成功率来做到这一点）
*使用XStandard之类的插件
*使用DOM tom制作自己的编辑器 - 从DIV中制作插入符号，自己处理选择，编辑和编辑所有内容。这就是谷歌如何做到这一点。这需要大量的编码。
答案 2 :(得分：1)
对于支持contenteditable的浏览器，可以非常轻松地提升解决方案;使用例如jQuery to save the data，并将新元素附加到可编辑内容（显然有按钮），只需很少的努力即可获得一个简单的WYSIWYG编辑器。
可能有点难以解决的一个问题是确保这些新元素的放置是正确的。但是，这个has been solved for Webkit，我确信在其他浏览器中也可以这样做。
使用contenteditable的编辑器既易于部署又轻量级，这绝对值得开发，恕我直言。
编辑：重新阅读您的问题后，我意识到您实际上正在寻找一种有效的非contenteditable解决方案。我不确定为什么; AFAIK contenteditable生成有效标记，如果您完全控制（仅允许用户插入元素并通过UI更改其属性），它也将是语义的。 AFAIK没有当前的WYSIWYG编辑使用contenteditable，但我可能错了。
答案 3 :(得分：1)
我认为您的问题是尝试使用之前评论中所述的Google Docs等工具，而不是专注于编辑HTML的工具。
是的，两种都是WYSIWYG，但我不认为GDocs的目的是生成漂亮的HTML，而是他们专注于提供MS Word的替代品，即使他们必须去创建奇怪的HTML方式。
我真的不相信你已经研究了几个星期而且你还没有使用CKEditor或TinyMCE。这两种解决方案都包括使用输出的属性，类或样式的选项，只需要查看示例，阅读一些文档并根据您的需要进行调整。
答案 4 :(得分：1)
我在Content Editable Text Editors中回答了非常类似的问题 - 为什么情况看起来像这样，我们所做的所见即所得编辑的作者可以做些什么呢。
是的，我知道这个问题是2年，但它仍然是最新的。
答案 5 :(得分：1)
Medium.js !!
Medium.js将HTML代码保持在
contenteditable内，语义简单， 和干净。 Medium.js还支持占位符，自动HR（或BR， 或者P）创作，事件，热键，简单＆amp;复杂的元素 注射等等！