创建简单的富文本 WYSIWYG 编辑器的最佳方法是什么？

Question

我需要创建一个使用任意标记来表示特殊文本样式保存其内容到一个XML文件中简单的富文本编辑器（如：[b]...[/b]对于大胆和[i]...[/i]为斜体）。所有后端 PHP 的东西看起来都相当简单，但该功能的前端 WYSIWYG 部分似乎有点复杂。我一直不愿使用当前可用的基于 JavaScript 的 WYSIWYG 编辑器之一，因为我想要允许的富文本选项非常有限，而且这些应用程序功能齐全，似乎需要更多的工作来刺激它们到我需要的功能。

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

• 前两种方法使用contentEditable或designMode属性创建可编辑元素，以及execCommand()将新文本样式应用于选定范围的方法。
  • 第一个选项使用标准div元素，对该元素内容执行所有样式命令。
• 第二个选项使用body包含在 中的窗口的可编辑性iframe，然后将从父文档中的按钮启动的任何样式命令传递到其contentWindow以更改包含的正文中的选定范围。这似乎是实现与选项一相同效果的几个额外步骤，但我认为将可编辑内容隔离在其自己的文档中是有其优势的。
• 第三个选项使用textarea覆盖 a div，并使用oninputJS 事件更新背景 divinnerHTML以匹配输入 textareavalue每当它更改时。显然，这需要一些字符串修饰才能将newlinetextarea<br/>中的字符等元素转换为 div中的元素，但这将允许我保留[/]标记的完整性，同时将可能混乱的 DOM 操作降级到仅前端显示。

我可以看到每种方法的优点和缺点。该contentEditable解决方案似乎最初最简单的，但对于这个功能的支持往往跨浏览器有所不同，每个浏览器能够支持它似乎在实现时以不同的方式操作DOM execCommand()。如前所述，textarea/div 解决方案似乎是保留我的任意样式约定的最佳方式，但是在输出 div 中显示富文本的自定义字符串操作过程可能会变得非常麻烦。

所以，我向您提出我的问题：鉴于我概述的开发目标，您会选择哪种方法，为什么？当然，如果我忽略了另一种方法可以更好地满足我的目的，请赐教！

提前致谢！

Answer 1

您看过http://php.net/manual/en/book.bbcode.php吗？这就是你的答案。如果你有疑问，那么你就做错了。:-)

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

注意：使用 plain-js BBcode 方法生成预览会更加高效。但是，除非您确实需要，否则不要使事情过于复杂。