javascript富文本编辑器

Question

有几个(非常好的)用Javascript编写的富文本web编辑器(例如FCKeditor，YUI Texteditor和许多其他编辑器)。

然而，我找不到任何关于如何构建这样一个组件的教程。可以解释高层考虑因素(架构)和/或低级“关键”要点中的更多细节(例如，为什么大多数编辑器使用iFrame，如何处理键盘输入，如选择文本时按Ctrl-B、Ctrl-C，以及不选择文本时等)

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

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

Answer 1

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

概述

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

window.document.designMode = "On";

由于以上内容会影响所有网页，因此大多数编辑器都使用iFrames，因此可编辑区域仅是具有自己的document对象的iFrame。

最重要的是，有一个API可以让javascript轻松访问样式。这是通过抛出execCommand()方法公开的。例如，您可以从Javascript调用

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

所选文本将变为粗体。

教程

我发现了以下内容：

简单的一步一步guide。

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

由microsoft提供的指南。