创建一个简单的所见即所得富文本编辑器的最佳方法是什么？

Question

我需要创建一个简单的富文本编辑器，使用任意标记来表示特殊文本样式（例如： [b]...[/b] 表示粗体，[i]...[/i] 表示斜体），并将其内容保存到XML文件中。所有后端PHP相关的东西似乎都很简单，但前端所需的所见即所得（WYSIWYG）部分似乎更加复杂。我一直不愿使用当前可用的基于JavaScript的所见即所得编辑器之一，因为我想要允许的富文本选项非常有限，而这些应用程序是如此完整，以至于将它们剥离到我需要的功能几乎就像是更多的工作。

因此，在创建一个基本的富文本编辑器时，我遇到了三种方法：

第一种方法和第二种方法使用contentEditable或designMode属性创建可编辑元素，并使用execCommand()方法将新的文本样式应用于所选范围。

第一种选择使用标准的div元素，在该元素的内容上执行所有样式命令。

第二种选择使用包含在iframe中的窗口的可编辑body，然后将从父文档中启动的任何样式命令传递到其contentWindow中，以更改所包含的body中的所选范围。这似乎是为了实现与第一种方法相同的效果而采取的几个额外步骤，但我认为将可编辑内容隔离到自己的文档中具有优势。

第三种选择使用覆盖在div上的textarea，并使用oninput JS事件将背景div的innerHTML更新为匹配输入textarea的value（每当它发生变化）。显然，这需要进行一些字符串操作，以将中的元素（如<code>newline</code>字符）转换为<div>中的<code><br/></code>，但这将允许我保留我的<code>[/]</code>标记的完整性，同时将潜在混乱的DOM操作限制在前端显示中。</br><div class="h-2"></div>我可以看到每种方法的好处和缺点。 <code>contentEditable</code>解决方案似乎最初最简单，但是对此功能的支持在各个浏览器中都不同，并且每个支持它的浏览器在实现<code>execCommand()</code>时似乎都以不同方式操作DOM。如前所述，textarea/div解决方案似乎是保留任意样式约定的最佳方法，但是在输出div中显示富文本的自定义字符串操作过程可能会变得非常复杂。</br><div class="h-2"></div>因此，我向您提出问题：鉴于我概述的开发目标，<strong>您会选择哪种方法，为什么？</strong>当然，如果有我忽略的其他方法可能更好地服务于我的目的，请 enlighten 我！</br><div class="h-2"></div>提前感谢！

- Aaron

---

你实际上想要 [b]...[/b] 还是 <b>...</b>？ - user123444555621

@Pumbaa80 我想使用方括号标记，即使对于像<b>这样的元素它并不能节省太多空间，但有一些样式约定会转化为更长和更复杂的HTML，我希望用任意标记来缩写它们。尽管所有内容都将被包含在CDATA标记中，但我仍希望尽可能地避免干扰XML的字符。 - Aaron

我不明白。为什么你不使用一个简单的文本区域（就像Stackoverflow一样）？ - user123444555621

如果我可以保持标记简单，我可能会这样做。我犹豫使用这种方法的唯一原因是我正在设计它以取悦内容编辑（即非程序员），当他们看到很多</[];>时往往会感到惊恐。 - Aaron

Answer 1

你是否看过http://php.net/manual/en/book.bbcode.php？这就是你需要的答案。如果你还有疑虑，那么你可能做错了什么。:-)

然后使用JS来跟踪keyup事件和简单的AJAX来打印输入的预览效果，就像在stackoverflow中一样。

注意：使用纯JS BBcode方法生成预览会更有效率。但是，除非必要，不要过于复杂化事情。

- Gajus

---

非常有趣。基本上，我会有一个原始的文本区域用于输入，在选择范围添加样式时会直接应用标记，并且还会有一个单独的（不是底层的）预览div，它会即时将标记转换为html并在输入时输出结果。我可能会采用这种解决方案，我只需要确保我的内容编辑器能够舒适地使用简单的“BBCode-esque”标记。谢谢回复！ - Aaron

Answer 2

BBCode、Markdown等的问题在于对于普通用户来说并不是那么容易。我建议看一下widgEditor，这是迄今为止我见过的最简单的所见即所得编辑器。它是一段时间前开发的，所以我不确定兼容性如何，但它确实是一个灵感。

我本来只想把这个作为评论，因为它并没有直接回答你的问题，但我对SA还比较新，不知道该怎么做。抱歉。

- Ondrej

---

感谢抽出时间回复。非程序员在面对过多标记时所感到的威胁感正是促使我创建这个编辑界面的原因。然而，我不希望我的应用程序盲目地创建样式元素，从而导致任何可能需要编辑 XML 源代码的人产生惊恐症。 - Aaron

我知道这些噩梦，相信我。你考虑过像Tidy这样的东西吗？如果你将它与一个简单的所见即所得编辑器结合起来，用户就不会太疯狂，那么你可以得到不错的代码。这取决于用户的知识水平，我知道很多人会对BBCode之类的东西感到恐慌，但是...还是要看情况。无论你选择哪条路，祝你好运！干杯。 - Ondrej

由于我没有评论其他回复的可能性，这听起来正是Guy建议的内容 - http://jrmoran.com/playground/markdown-live-editor/ - 它完全基于JavaScript，因此不需要使用AJAX。 - Ondrej