如何创build一个富文本编辑器

嘿,我想知道创build富文本编辑器背后的概念是什么。 我的意思是如何创build一个富文本编辑器。 我想学习实施。

PS:请不要build议使用YUI或任何其他内置的库。 我想做一个我自己的。

那么背后的概念是什么?

谢谢 :)

最简单的方法如下。 它被TinyMCE和CKEditor等使用。 有很多变化:特别是,如果你正在创build一个代码编辑器,你可以使用textareas和一个等宽的字体来做些聪明的技巧。

  • dynamic创build一个iframe,并将可编辑的内容放在该iframe的文档中
  • 通过将其文档的designMode属性设置为“on”或将其<body>元素的contentEditable属性设置为true,将iframe设置为可编辑状态。 请注意, designMode支持早于Firefox的内容,因此它的designMode小了。
  • 在主文档中,在iframe中的选定内容上作出行动的地方添加button(比如粗体,斜体,插入图像等),这些button是合理的(比如直接在可编辑的iframe之上)。 所有的浏览器都提供了一个execCommand()方法(例如,参见MSDN和MDN )来完成这些操作,尽pipe它们的工作方式和生成的标记有一些变化。

这是如何工作的基本知识。 大多数编辑所做的大量其他复杂的事情并不是很明显,部分是为了消除浏览器之间的许多差异,部分是为了提供内置浏览器命令未涉及的额外function。 这是一个非常复杂和困难的事情,需要高度的专业知识和承诺,不能轻易采取。

你可能想检查一下。 我正在寻找同样的事情! http://www.devguru.com/features/tutorials/wysiwyg/wysiwyg1.html

我不会build议你看别人使用,但我会build议看看jWYSIWYG看看它是如何编码在jQuery中。