Javascript 如何创建富文本编辑器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6007242/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to create a rich text editor
提问by codeomnitrix
Hey all i want to know what is the concept behind creating the rich text editor. i mean how to create a rich text editor. I want to learn the implementation.
嘿，我想知道创建富文本编辑器背后的概念是什么。我的意思是如何创建一个富文本编辑器。我想学习实现。
PS: please donot suggest using YUI or any other built in library. I want to make one my own.
PS：请不要建议使用 YUI 或任何其他内置库。我想自己做一个。
So what's the concept behind?
那么背后的概念是什么呢？
Thanks :)
谢谢 ：）
回答by Tim Down
The easiest way is the following. It's used by TinyMCEand CKEditorand many others. There are many variations: in particular, if you are creating a code editor, there are clever tricks you can do using textareas and a monospaced font.
最简单的方法如下。它被TinyMCE和CKEditor以及许多其他人使用。有很多变化：特别是，如果您正在创建代码编辑器，您可以使用 textareas 和等宽字体来做一些聪明的技巧。
- Dynamically create an iframe and place the editable content within that iframe's document
- Set the iframe to be editable either by setting its document's
designModeproperty to "on" or by setting its<body>element'scontentEditableproperty to true. Note thatdesignModesupport predatescontenteditablein Firefox and as a consequence is a lot less buggy. - Add buttons (such as bold, italic, insert image, etc) somewhere sensible (such as directly above the editable iframe) in the main document that act on the selected content within the iframe. All browsers supply an
execCommand()method (see MSDNand MDN, for example) for doing many of these actions, although there is some variation in exactly how they work and what mark-up they produce.
- 动态创建 iframe 并将可编辑内容放置在该 iframe 的文档中
- 通过将 iframe 的文档
designMode属性设置为“on”或将其<body>元素的contentEditable属性设置为 true，将 iframe 设置为可编辑。请注意，designMode支持早contenteditable于 Firefox，因此错误少得多。 - 在主文档中的某个位置（例如可编辑 iframe 的正上方）添加按钮（例如粗体、斜体、插入图像等），这些按钮会作用于 iframe 中的选定内容。所有浏览器都提供了一种
execCommand()方法（例如，参见MSDN和MDN）来执行这些操作中的许多操作，尽管在它们的工作方式和它们产生的标记方面存在一些差异。
That's the very basics of how it works. There are tons of other, complicated things that most editors do that aren't immediately obvious, in part to iron out the many differences between browsers and in part to provide extra functionality not covered by the built-in browser commands. It's a very complicated and difficult thing to get right, requires a high degree of expertise and commitment and is not something to be taken on lightly.
这就是它如何工作的基本原理。大多数编辑器所做的许多其他复杂的事情并不是立即显而易见的，部分是为了消除浏览器之间的许多差异，部分是为了提供内置浏览器命令未涵盖的额外功能。这是一件非常复杂和困难的事情，需要高度的专业知识和承诺，不能掉以轻心。
