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

Question

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

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

• 前两种方法使用[i]...[/i]或contentEditable属性创建可编辑元素，使用designMode方法将新文本样式应用于所选范围。
  • 第一个选项使用标准execCommand()元素，对该元素内容执行所有样式命令。
• 第二个选项使用div中包含的窗口的可编辑body，然后将从父文档中的按钮启动的任何样式命令传递到其iframe以更改所选范围包含的身体。这似乎是完成与选项1相同效果的几个额外步骤，但我想在自己的文档中隔离可编辑内容有其优点。
• 第三个选项使用contentWindow覆盖textarea，并使用div JS事件更新背景div的oninput以匹配输入textarea的innerHTML无论什么时候改变。显然，这需要一些字符串finagling来将textarea中的value个字符之类的元素转换为div中的newline，但这样可以保留<br/>标记的完整性，同时将可能混乱的DOM操作降级为前端显示。

我可以看到每种方法的优点和缺点。 [/]解决方案似乎最初是最简单的，但对这些功能的支持往往因浏览器而异，并且支持它的每个浏览器在实现contentEditable时似乎都以不同方式操纵DOM。如前所述，textarea / div解决方案似乎是保留我的任意样式约定的最佳方法，但是在输出div中显示富文本的自定义字符串操作过程可能会变得非常毛茸茸。

所以，我向你提出我的问题：鉴于我已经概述的发展目标，你会选择哪种方法，为什么？当然，如果有另一种方法我会忽略那个可能更好地服务于我的目的，请赐教！

提前致谢！

Answer 1

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

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

NB使用plain-js BBcode方法生成预览会更有效率。但是，除非你有必要，否则不要过度复杂化。

Answer 2

BBCode，Markdown的问题，......对于genpop而言，这并不是一件轻而易举的事。我建议看看widgEditor，它是迄今为止我见过的最简单的WYSIWYG编辑器。它是在不久前开发的，所以我不确定兼容性，但它确实是一种灵感。

我只会将此作为评论包含在内，因为它不会直接回答您的问题，但我对SA很新，并且无法找到如何做到这一点。遗憾。