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.
Overview
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";
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.
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
发布评论
评论（1）
经过更多研究，我发现了以下内容。 构建富文本编辑器的功能已经在浏览器中实现。 IE 是第一个创建此类 API 的浏览器，而 Firefox 也复制了它。
概述
要点是 javascript 对象“document”有一个名为 designMode 的属性，可以将其设置为“on”。 这会将所有页面转换为类似文本区域的组件。 想象一下，浏览器打开页面的方式与 MS-Word 相同：用户可以看到格式，但也可以在页面中键入内容（通常浏览器以只读方式打开页面）。
由于上述内容会影响所有网页，因此大多数编辑器都使用 iFrame，因此可编辑区域仅是具有自己的文档对象的 iFrame。
最重要的是，有一个 API 可以让 JavaScript 轻松访问样式。 这是通过 execCommand() 方法公开的。 例如，您可以从 Javascript 调用
，所选文本将变为粗体。
教程
我找到了以下内容：
简要的分步指南。
Mozilla 指南。 它有我找到的最方便的 API 参考以及更多链接。
microsoft 提供的指南。
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.
Overview
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).
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.
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
and the selected text will become bold.
Tutorials
I have found the following:
A brief step by step guide.
A mozilla guide. It has the most convenient API reference I have found and also some more links.
A guide by microsoft.