内容可编辑的文本编辑器

Question

我尝试过几个HTML编辑器，包括TinyMCE、CKEditor和现在的NicEdit。 NicEdit在一个方面很好 - 它非常容易定制。 但是，我发现它们都有一个倾向于产生非常糟糕的HTML。 不一定是这样，因为它们不会做太多工作来正确解释无效的用户操作，例如尝试在没有首先进行选择的情况下对某些内容进行样式设置。

很容易最终得到包含类似以下内容的HTML：

<span style='color:#ff0000'><span style='color:#ff0000'><span style='color:#ff0000'>Red</span></span></span>

我想，这基本上是可编辑内容概念的限制所在，对于电子邮件或像这样的论坛帖子来说，糟糕的HTML并不重要，但如果生成的HTML必须用于网页上下文中，则会变得非常不舒服。如果所有这些都没错，那有什么替代方案吗？也许可以使用基于Flash的插件编辑器，它可以产生更好的HTML并更加努力地解释用户想要做什么？

我想，原则上可能会对生成的输出进行研究，并在必要时清除展开的跨度之间的所有内容，但这可能会是一项相当大的工程。

- DroidOS

---

是的，这也是我的经验。我最终选择了CodeMirror并编辑源代码。顺便说一句：Python的Markdown实用程序似乎发布了非常稳定的HTML5 - 我还没有注意到任何问题。 - Aaron Meier

CodeMirror看起来很不错，但它似乎是一款程序员编辑器。我想要的是一种可靠的方式，让网页设计师类型创建丰富的页面内容 - 即使他们不懂HTML。 - DroidOS

是的，我理解你的担忧。所见即所得的网页编辑器表现如此糟糕真是令人遗憾。我几乎总是在编辑后手动清理源代码。我希望有人能为你提供答案，这将是一件非常好的事情。 - Aaron Meier

Answer 1

首先我应该提到，我是CKEditor核心开发人员，因此我的意见可能不完全客观 :).

据我所知，HTML编辑的状态在过去几年中没有改变。浏览器厂商花费的时间修复错误很少，以至于CKEditor trac上由浏览器问题引起的大多数最古老的错误仍然有效，我们创建的大部分hack仍然需要使用。我指的不仅是IE 7或8，因为实际上IE可能并不是最糟糕的。我没有精确检查过，但我认为由于近期IE版本中DOM API的一般改进，它们可能需要比其他浏览器更少的hack，因为它的编辑支持似乎是最稳定和完整的。例如，对于Webkit浏览器需要最丑陋的hack（参见：Webkit bug和closed CKEditor ticket），而这个bug已经有5年了。更重要的是，这不是边缘案例或不太可能发生的情况——这个问题使得创建整个选择范围变得不可能，例如在空内联元素中。

因此，与一般的网络技术不同，HTML编辑停留在10年前的状态。相同的错误、相同的缺失功能、相同的标记语言。猜猜fontName命令创建了什么？没错，不是开玩笑，是<font face="">。至少浏览器在这方面非常一致...但一致性很快就消失了。

那规范呢？有一个draft，但它根本没有帮助——它只是将当前状态标准化，而我们知道当前状态并不好。据我所知，这个草案已经死了。

我还有一个担心，那就是编辑方向。谷歌在Gmail中使用contenteditable（不，Google Docs并非基于contenteditable构建），因此它不关心HTML输出。苹果在iOS的电子邮件应用程序以及可能在MacOS的Mail中重复使用HTML编辑组件（因为我看到相同的特定行为）。Mozilla在Thunderbird中重用Gecko，如果微软在Outlook中也这样做，那也不足为奇。所有这些公司都不关心HTML输出。这些引擎被设计成理解每一种“垃圾”，而不是修复它，而HTML编辑草案正是关于这个问题。

由于所有这些，我们可以看到像这个这样的新问题。在Blink/Webkit bug report中，我总结了按下退格键时出现的整个不正确范围（从我们关心HTML的开发人员的角度来看）。它被设计得很漂亮（尽管并不是），但HTML和编辑API并不重要。

我不关心这个。我需要一个编辑器！

解决所有这些问题的方法是在浏览器之后修复所有内容并/或用我们自己的实现替换它们的本机实现。在过去的1.5年里，我几乎完全致力于过滤和规范化输入和输出。在CKEditor 4.0中，我们重写了整个粘贴和HTML插入过程，在最近发布的CKEditor 4.1中，我们引入了 高级内容过滤器，该过滤器可以将输入数据适应编辑器配置。因此，启用的功能越少，HTML允许的内容就越少。请查看此示例-尝试粘贴/编写/创建垃圾HTML。

当然，仍有改进的空间。例如，我们无法立即在编辑期间过滤数据。如果浏览器（如Webkit）创建了一堆麻烦，我们可以在输出时进行修复，但实际上我们还没有决定这样做，因为过滤是一个非常复杂的过程，可能会破坏性能。我们限制输入和用户操作，因此有一天我们将实现自己的退格/删除处理程序，以防止浏览器破坏我们的HTML。这是唯一的解决方案，这就是为什么只有2或3个好的所见即所得编辑器的原因。

无论如何，在浏览器的HTML编辑实现方面几乎没有什么变化，但所见即所得编辑器的世界发生了很多变化。如果你是基于几年前的经验进行操作，我建议你再次检查它们。

- Reinmar

---

谢谢你，Reinmar。你的回答让我给你点赞并且被采纳了——至少因为它非常详细。我从TinyMCE转换到了更好的CKEditor，最后再到了NicEdit。这最后一次转换是由两个原因驱动的——我需要将字体大小指定为em（子）倍数，并且我还需要用可变的选择填充字体选择器组合框中的Web字体——在NicEdit中这些都相对容易实现。我试图使用CKEditor做同样的事情，但发现学习曲线太陡峭了，时间也不够用。 - DroidOS

Answer 2

我花了很多时间试图找到确保从所见即所得编辑器中获得生产级HTML的方法，因此我想在这里分享我的结果，以使任何遇到此线程的人受益。

非常简短的建议-别浪费时间了。可编辑内容的编辑器永远不会提供任何接近生产级HTML的东西。像Reinmar这样的人已经做了大量工作来最小化这个问题，但是用户很容易使处理可编辑内容的底层浏览器代码混乱。

你最好使用BBCode标记。100％防护的选择是让用户编辑BBCode，并在任何时候严格控制他/她所允许的操作。我在自己的项目中做到了这一点，但是让非技术用户玩转任何描述的标记的问题是棘手的。为BBCode编辑放置自己的所见即所得界面并不是一个轻松的工作。幸运的是，SCEditor可以提供帮助。Sam在这里做得非常出色。请注意 - 输出的内容仍然可能包含一些“污浊”的部分，因为所见即所得位仍然依赖于可编辑内容。但是，清理起来相对容易。

- DroidOS