如何用 JavaScript 编写一个简单的 WYSIWYG 编辑器？答案

【问题标题】：How does one go about writing a simple WYSIWYG editor in JavaScript?如何用 JavaScript 编写一个简单的 WYSIWYG 编辑器？
【发布时间】：2009-05-04 21:37:35
【问题描述】：

在我的项目中，我需要编写小型 WYSIWYG 编辑器（只需让用户将文本设置为粗体/斜体/下划线，也许还有更多）。所以我不想使用像tinymce或fckeditor这样的怪物。我的问题是我需要知道哪些 HTML 元素和 javascript 函数？在这个问题中，我可以在其中编辑和格式化文本的 HTML 元素是一件非常有趣的事情。

【问题讨论】：

如果您想支持多个浏览器引擎，您将面临一条艰难的道路。 This talk (1h31m in) 来自 Aloha 编辑团队的 Norbert Pomaroli 进入了一些陷阱。顺便说一句，你是如何管理的？

标签： javascript html editor wysiwyg

【解决方案1】：

如果您想自己动手，请查看Midas。它适用于 FF3+、IE、Safari、Opera、Chrome。

基本上，您使用 contentEditable 和 execCommand 将浏览器变成 RTE。

【讨论】：

【解决方案2】：

document.getElementById('edit').contentDocument.designMode = "on";

看看http://www.mozilla.org/editor/ie2midas.html

【讨论】：

【解决方案3】：

有http://www.gosu.pl/steditor/，代码非常简单明了。它使用其他答案中提到的 designMode 和 execCommand。

【讨论】：

【解决方案4】：

或者使用简单的语言，如 markdown 或 Textile，并提供实时预览。

我认为大多数人会得到星号表示强调和双星号表示粗体。

【讨论】：

【解决方案5】：

我过去曾使用过YUI 的所见即所得编辑器，它允许您配置按钮，以便您可以轻松使用它并将按钮限制为粗体/斜体/下划线。

【讨论】：