5

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

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

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

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

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

提前致谢！

4

2 回答 2

2

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

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

注意使用plain-js BBcode 方法生成预览会更有效率。但是，除非您需要，否则不要过于复杂。

于 2011-12-14T21:30:06.340 回答
0

BBCode、Markdown 等的问题在于它对于 genpop 来说并不是那么微不足道。我建议看一下widgEditor，它是迄今为止我见过的最简单的 WYSIWYG 编辑器。它是前一段时间开发的，所以我不确定兼容性，但它确实是一个灵感。

我只会将此作为评论包含在内，因为它不会直接回答您的问题，但我对 SA 相当陌生，无法找到如何做到这一点。对不起。

于 2011-12-14T21:38:25.440 回答