我需要创建一个简单的富文本编辑器,使用任意标记将其内容保存到 XML 文件中,以指示特殊的文本样式(例如[b]...[/b]
:粗体和斜体)[i]...[/i]
。所有后端 PHP 的东西看起来都相当简单,但该功能的前端 WYSIWYG 部分似乎有点复杂。我一直不愿使用当前可用的基于 JavaScript 的 WYSIWYG 编辑器之一,因为我想要允许的富文本选项非常有限,而且这些应用程序功能如此齐全,以至于似乎需要更多的工作来解决它们到我需要的功能。
因此,在着手创建一个简单的富文本编辑器时,我遇到了三种方法:
- 前两种方法使用
contentEditable
ordesignMode
属性来创建可编辑元素,以及execCommand()
将新文本样式应用于选定范围的方法。- 第一个选项使用标准
div
元素,对该元素内容执行所有样式命令。
- 第一个选项使用标准
- 第二个选项使用
body
包含在 中的窗口的可编辑项iframe
,然后将从父文档中的按钮启动的任何样式命令传递到其contentWindow
以更改包含的正文中的选定范围。这似乎需要几个额外的步骤来实现与选项一相同的效果,但我认为将可编辑内容隔离在其自己的文档中具有其优势。 - 第三个选项使用
textarea
覆盖 adiv
,并使用oninput
JS 事件来更新背景 divinnerHTML
以匹配输入 textarea 的value
变化,只要它发生变化。显然,这需要一些字符串修饰来将newline
文本区域<br/>
中的字符等元素转换为 div 中的元素,但这将允许我保持我的[/]
标记的完整性,同时将潜在的混乱 DOM 操作降级为仅前端显示。
我可以看到每种方法的优点和缺点。这些contentEditable
解决方案最初看起来是最简单的,但是对这个特性的支持往往因浏览器而异,并且每个支持它的浏览器在实现时似乎对 DOM 的操作方式不同execCommand()
。如前所述,textarea/div 解决方案似乎是保留我的任意样式约定的最佳方式,但在输出 div 中显示富文本的自定义字符串操作过程可能会变得非常麻烦。
所以,我向你提出我的问题:鉴于我概述的发展目标,你会选择哪种方法,为什么?当然,如果我忽略了另一种可能更好地服务于我的目的的方法,请赐教!
提前致谢!