javascript富文本编辑器 [英] javascript Rich Text Editors
问题描述
有几个（非常好的）富文本网络编辑器用Javascript编写（例如FCKeditor，YUI Texteditor和许多其他人）。
There are several (very good) rich text web editors written in Javascript (eg FCKeditor, YUI Texteditor and many many others).
但是我找不到关于如何构建这样一个组件的任何教程。可以解释高级别考虑因素（架构）和/或低级关键点中的更多细节（即为什么大多数编辑器都使用iFrame，如何处理键盘输入，如Ctrl-B，Ctrl -C当选择文本时，如果没有等等）
However I couldn't find any tutorial on how to build such a component. Something that would explain both high-level considerations (architecture) and/or more details in low-level "critical" points (ie why do most of the editors out there use iFrame, how do you handle keyboard input like Ctrl-B, Ctrl-C when the text is selected and when it is not etc)
我的主要动机是好奇心;如果我今天必须开发这样一个编辑器，我不知道从哪里开始。
My main motivation is curiosity; if I had to develop such an editor today I wouldn't know where to start from.
有没有人知道任何涵盖上述问题的教程（理想情况下，解释如何从头开始构建一个wysiwyg编辑器）？
Does anyone know of any tutorial that covers the above issues (ideally, something that explains how to build a wysiwyg editor from scratch)?
推荐答案
经过更多研究，我发现了以下内容。构建富文本编辑器的功能已在浏览器中实现。 IE是第一个创建这样一个API并且Firefox复制它的。
After more research I found the following. The functionality for building a rich-text-editor is already implemented at the browser. IE was the first to create such an API and Firefox replicated it.
重点是javascript对象document有一个名为designMode的属性，可以将其设置为on。这会将所有页面转换为类似textarea的组件。想象一下，浏览器以与MS-Word相同的方式打开页面：用户可以看到格式，但他也可以输入页面（通常浏览器以只读方式打开页面）。
The main point is that the javascript object "document" has a property called designMode which can be set to "on". This converts all the page to to a textarea-like component. Imagine that the browser opens the page the same way that MS-Word would: the user can see the formatting but he can also type in the page (normally the browser opens a page as readonly).
window.document.designMode = "On";
由于上述因素会影响所有网页，因此大多数编辑都使用iFrame，因此可编辑区域仅为iFrame拥有自己的文档对象。
Because the above affects all the web page, most editors use iFrames so that the editable area is only the iFrame which has it's own document object.
除此之外，还有一个API允许轻松访问样式。这是暴露抛出execCommand（）方法。例如，您可以从Javascript调用
On top of that, there is an API that allows easy javascript access to styling. This is exposed throw the execCommand() method. For example you can call from Javascript
document.execCommand('bold', false, '');
并且所选文本将变为粗体。
and the selected text will become bold.
我找到了以下内容：
一步一步的指南。
Mozilla 指南。它有我发现的最方便的API参考，还有一些链接。
A mozilla guide. It has the most convenient API reference I have found and also some more links.
这篇关于javascript富文本编辑器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
