javascript富文本编辑器

有几个（非常好的）用Javascript编写的富文本web编辑器（例如FCKeditor、YUI Texteditor和许多其他编辑器）

然而，我找不到任何关于如何构建这样一个组件的教程。可以解释高级注意事项（体系结构）和/或低级“关键”点的更多细节的东西（例如，为什么大多数编辑器使用iFrame，当文本被选中和未选中时，如何处理键盘输入，如Ctrl-B、Ctrl-C等）

我的主要动机是好奇心；如果我今天要发展这样一个编辑，我不知道从哪里开始

---

是否有人知道任何涵盖上述问题的教程（理想情况下，是解释如何从头开始构建所见即所得编辑器的教程）？

经过进一步研究，我发现以下内容。构建富文本编辑器的功能已在浏览器中实现。IE是第一个创建这样一个API的人，Firefox也复制了它

概述 要点是javascript对象“document”有一个名为designMode的属性，该属性可以设置为“on”。这会将所有页面转换为类似textarea的组件。假设浏览器打开页面的方式与MS Word相同：用户可以看到格式，但也可以键入页面（通常浏览器以只读方式打开页面）

因为上面的内容会影响所有网页，所以大多数编辑器都使用iFrame，因此可编辑区域仅是具有自己文档对象的iFrame

除此之外，还有一个API，允许javascript轻松访问样式。这是通过execCommand（）方法公开的。例如，您可以从Javascript调用

document.execCommand('bold', false, '');

所选文本将变为粗体

教程 我发现：

一步一步的简短谈话

mozilla。它有我找到的最方便的API参考，还有更多的链接

---

这对我帮助很大。经过一些实验，目前我正在对您的答案的一个经过大量修改的版本发表评论：）感谢您提出并回答您自己的问题，这正是我想要的。利用您的好奇心，激发您在您最喜欢的编辑器中打开源代码并开始探索。因为这些编辑器是用JavaScript编写的，所以答案是免费的。我知道您正在寻找更容易理解的内容，但是阅读源代码会非常有价值。开始构建编辑器可能非常简单，只需使用现有的开源编辑器并对其进行修改以满足您自己的特殊需要。IIRC，iframe是为了让Firefox更好地发挥作用。如果您想编写JavaScript文本编辑器，那么您可能需要在文档中获取所选文本的HTML，如下所述：

document.execCommand('bold', false, '');