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

What's the best method for creating a simple Rich-Text WYSIWYG editor?

本文关键字：最佳方法是什么编辑器所见即所得简单文本创建更新时间：2023-09-26

我需要创建一个简单的富文本编辑器，将其内容保存到XML文件中，使用任意标记来指示特殊的文本样式(例如:[b]...[/b]用于粗体和[i]...[/i]用于斜体)。所有后端PHP内容似乎都相当简单，但前端所见即所得部分的特性似乎有点复杂。我一直不愿使用目前可用的基于javascript的所见即所得编辑器，因为我想允许的富文本选项是如此有限，而且这些应用程序的功能是如此全面，以至于把它们简化为我需要的功能似乎要做更多的工作。

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

前两种方法使用contentEditable或designMode属性来创建一个可编辑的元素，execCommand()方法将新的文本样式应用到选定的范围。
- 第一个选项使用一个标准的div元素，在该元素的内容上执行所有的样式命令。
第二个选项使用包含在iframe中的窗口的可编辑body，然后将父文档中的按钮发起的任何样式命令传递到其contentWindow，以改变所包含的主体中的选定范围。这似乎是为了实现与选项一相同的效果而进行的几个额外步骤，但我认为将可编辑内容隔离在其自己的文档中有其优点。
第三个选项使用textarea覆盖div，并使用oninput JS事件更新背景div的innerHTML以匹配输入文本区域的value。显然，这需要一些字符串处理来将文本区域中的newline字符等元素转换为div中的<br/>，但这将允许我保留[/]标记的完整性，同时将潜在的混乱DOM操作降级为仅前端显示。

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

因此，我向您提出我的问题:鉴于我所概述的开发目标，您会选择哪种方法，为什么?当然，如果我忽略了另一种可能更好地达到我的目的的方法，请给我启发!

提前感谢!

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

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

注:使用纯js的BBcode方法生成预览要有效得多。但是，除非你确实需要，否则不要把东西弄得太复杂。

BBCode, Markdown，…这对于genpop来说并不是微不足道的。我建议看看widgeeditor，它是迄今为止我见过的最简单的所见即所得编辑器。它是一段时间前开发的，所以我不确定兼容性，但它肯定是一个灵感。

我只会把这作为一个评论，因为它没有直接回答你的问题，但我对SA相当陌生，不知道如何做到这一点。对不起。