Javascript 什么'；创建简单的富文本所见即所得编辑器的最佳方法是什么？_Javascript_Html_Wysiwyg_Contenteditable_Designmode

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

javascript html

Javascript 什么'；创建简单的富文本所见即所得编辑器的最佳方法是什么？,javascript,html,wysiwyg,contenteditable,designmode,Javascript,Html,Wysiwyg,Contenteditable,Designmode,我需要创建一个简单的富文本编辑器，使用任意标记将其内容保存到XML文件中，以指示特殊的文本样式（例如：[b]…[/b]用于粗体和[I]…[/I]用于斜体）。所有后端PHP的内容似乎都相当简单，但该功能的前端所见即所得部分似乎有点复杂。我一直不愿使用当前可用的基于JavaScript的WYSIWYG编辑器，因为我希望允许的富文本选项非常有限，而且这些应用程序功能非常齐全，似乎需要更多的工作才能将它们转换为我需要的功能因此，在着手创建基本的富文本编辑器时，我遇到了三种方法：前两种方法使用con

我需要创建一个简单的富文本编辑器，使用任意标记将其内容保存到XML文件中，以指示特殊的文本样式（例如：

[b]…[/b]

用于粗体和

[I]…[/I]

用于斜体）。所有后端PHP的内容似乎都相当简单，但该功能的前端所见即所得部分似乎有点复杂。我一直不愿使用当前可用的基于JavaScript的WYSIWYG编辑器，因为我希望允许的富文本选项非常有限，而且这些应用程序功能非常齐全，似乎需要更多的工作才能将它们转换为我需要的功能

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

前两种方法使用
```
contentEditable
```
或
```
designMode
```
属性创建可编辑元素，使用
```
execCommand（）
```
方法将新文本样式应用于选定范围。
- 第一个选项使用标准的
```
div
```
  元素，在该元素上执行所有样式化命令
第二个选项使用
```
iframe
```
中包含的窗口的可编辑
```
正文
```
，然后将从父文档中的按钮启动的任何样式命令传递到其
```
内容窗口
```
，以更改所包含正文中的选定范围。这看起来像是几个额外的步骤来实现与选项一相同的效果，但我认为在其自己的文档中隔离可编辑内容有其优点

第三个选项使用一个

textarea

覆盖一个

div

，并使用

oninput

JS事件来更新背景div的

innerHTML

以匹配输入textarea的

值。显然，这需要一些字符串欺骗来将textarea中的换行符
字符等元素转换为div中的
，但这将允许我保留[/]
标记的完整性，同时将可能混乱的DOM操作仅放在前端显示


我可以看到每种方法的优点和缺点。contentEditable
解决方案一开始似乎是最简单的，但对该功能的支持往往因浏览器而异，而且每个支持该功能的浏览器在实现execCommand（）
时对DOM的操作似乎各不相同。如前所述，textarea/div解决方案似乎是保留我的任意样式约定的最佳方法，但是在输出div中显示富文本的自定义字符串操作过程可能会变得非常复杂
因此，我向您提出我的问题：鉴于我概述的发展目标，您会选择哪种方法，以及为什么选择？当然，如果我忽略了另一种可能更符合我的目的的方法，请启发我
提前谢谢
 你看过吗？这是你的答案。如果您有疑问，那么您是做错了事情。：-）
然后使用JS跟踪keyup
事件，并使用简单的AJAX打印输入预览。就像在stackoverflow中一样
注意：使用简单的js BBcode方法生成预览将更加高效。但是，除非您需要，否则不要使内容过于复杂。
BBCode、Markdown。。。这对genpop来说并不是那么微不足道。我建议看看，它是迄今为止我见过的最简单的所见即所得编辑器。它是在一段时间前开发的，所以我不确定是否兼容，但它确实是一个灵感
我只会将此作为一个评论，因为它并没有直接回答您的问题，但我对SA相当陌生，无法找到如何做到这一点。对不起。
很有趣。因此，基本上，我将有一个原始文本区域用于输入，在将样式添加到选定范围时，标记将直接应用到该区域，还有一个单独的（非基线）预览div，它将动态地将标记转换为html，并在输入时输出结果。我可能会使用这个解决方案，我只需要确保我的内容编辑器能够轻松地使用简单的“BBCode-esque”标记。谢谢你的回复！感谢您花时间回复。非程序员在面对过多的标记时所感受到的威胁正是促使我创建这个编辑界面的因素。但是，我不希望我的应用程序盲目地创建样式元素，从而导致可能需要编辑xml源代码本身的任何人恐慌。你考虑过像Tidy这样的东西吗？如果你把它和一个简单的所见即所得（WYSIWYG）结合起来，用户就不会太疯狂，那么你就可以得到像样的代码。取决于用户的知识，我知道很多人会对BBCode之类的东西发狂，但是再一次。。。视情况而定。无论你选择哪条路，祝你好运！干杯。由于我无法评论其他回复，这听起来和Guy的建议一模一样——都是基于JavaScript的，所以不需要AJAX。你真的想要[b]…[/b]
还是..
？@Pumbaa80我想用方括号标记，尽管像
这样的元素不会节省太多空间，但仍有一些样式约定会转换为更长、更复杂的html，我想用任意标记来缩写，即使所有内容都包含在CDATA
标记中，我希望尽可能避免XML中可能存在的干扰字符。我不明白。为什么不使用一个简单的文本区（比如Stackoverflow dows）？我可以，尤其是如果我能保持标记的简单性。我犹豫使用这种方法的唯一原因是，我设计这种方法是为了安抚内容编辑器（阅读：非程序员），当他们看到一个l