javascript富文本编辑器

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

但是我找不到任何关于如何构建这样一个组件的教程.可以解释高级别考虑因素(架构)和/或低级"关键"点中的更多细节(即为什么大多数编辑器都使用iFrame,如何处理键盘输入,如Ctrl-B,Ctrl -C选择文本时以及不选择文本时等)

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

有没有人知道任何涵盖上述问题的教程(理想情况下,解释如何从头开始构建一个wysiwyg编辑器)？

经过更多研究,我发现了以下内容.构建富文本编辑器的功能已在浏览器中实现.IE是第一个创建这样的API并且Firefox复制它的人.

概观

重点是javascript对象"document"有一个名为designMode的属性,可以设置为"on".这会将所有页面转换为类似textarea的组件.想象一下,浏览器以与MS-Word相同的方式打开页面:用户可以看到格式,但他也可以键入页面(通常浏览器以只读方式打开页面).

window.document.designMode = "On";

由于上述内容会影响所有网页,因此大多数编辑器都使用iFrame,因此可编辑区域只是具有自己文档对象的iFrame.

最重要的是,有一个API允许轻松访问样式的JavaScript.这是暴露抛出execCommand()方法.例如,您可以从Javascript调用

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

并且所选文本将变为粗体.

教程

我发现了以下内容:

一步一步的简要指南.

一个mozilla 指南.它有我发现的最方便的API参考,还有一些链接.

微软的指南.

利用您的好奇心激励您在您喜欢的编辑器中打开源代码并开始探索.由于这些编辑器是用JavaScript编写的,所以答案是免费的.

我意识到你正在寻找更容易被消化的东西,但阅读源代码可能是非常有益的.

开始构建编辑器可以像使用现有的开源编辑器并对其进行修改以满足您自己的特殊需求一样简单.