基本的 javascript 所见即所得编辑器答案

【问题标题】：Basic javascript wysiwyg editor基本的 javascript 所见即所得编辑器
【发布时间】：2010-09-05 01:33:06
【问题描述】：

我能解释一下如何使用 textarea 制作所见即所得的编辑器吗？我需要它能够做的就是解析基本的html标签，如粗体、斜体、下划线等。它不需要任何插入它的按钮，我只想在解析的textarea标签中有一个默认文本html。

例子：

<textarea cols="20" rows="20" name="ok">
<b>wat</b>
</textarea>

这将在文本区域内打印出<b>wat</b> 而不是 wat。

编辑：首选 jQuery

【问题讨论】：

你看过 tinymce 或其他一百个 javascript 富编辑器中的任何一个吗？您对使用它们有异议吗？
我认为即使是制作一个基本的所见即所得编辑器也不是那么简单。问题是具有样式外观的文本显示是 HTML 中的输出函数。但是您还需要输入端来创建编辑器。我建议你研究一个写得很好的、灵活的，比如 YUI RTE。然后配置你不想要的功能。
我认为创建自己的简单编辑器需要一些非常繁重的正则表达式。

标签： javascript jquery wysiwyg

【解决方案1】：

查看contenteditable 属性。许多现代浏览器都支持它。只需将其添加到元素并进行编辑...

document.getElementById('something').contentEditable = true;

当然，它不适用于 textareas。您需要将 textarea 与 div 交换并使其可编辑。您还需要确保 textarea 在提交表单时将 div 的内容（例如 innerHTML）作为其值。

【讨论】：

【解决方案2】：

文本区域无法解析 HTML -- 句号。（任何人都可以随时纠正我）

您看到的 WYSIWYG 编辑器不在 textarea 中，至少以不同的方式。我建议使用预构建的编辑器，例如 TinyMCE 或 FCK Editor。

【讨论】：

有趣的是，textareas 可以对 html 进行“解析”。您放入其中的任何内容（当然除了</textarea>）都将被视为文本区域的文字内容，而不是html。这甚至包括 cdata 部分和 html cmets。

【解决方案3】：

textarea 不会解析 HTML，但通过使用 WYSIWYG 插件，编辑器将替换 textarea 并让用户能够查看和修改内容。使用一些编辑器，例如 TinyMCE，您可以将其设置为简单模式，并且只允许您感兴趣的基本格式（粗体、斜体、下划线、项目符号等）。这有助于防止编辑器变得混乱使用不必要的工具。

我建议查看TinyMCE 或CKEditor

【讨论】：