如何创建富文本编辑器

Question

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

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

那背后的概念是什么？

谢谢 :)

Answer 1

最简单的方法如下.它被TinyMCE和CKEditor以及许多其他人使用.有许多变化:特别是,如果您正在创建代码编辑器,您可以使用textareas和等宽字体进行巧妙的技巧.

动态创建iframe并将可编辑内容放在该iframe的文档中
通过将文档的designMode属性设置为"on"或将其<body>元素的contentEditable属性设置为true,将iframe设置为可编辑.请注意,designMode支持早contenteditable于Firefox,因此减少了很多错误.
在主文档中的某个合理位置(例如粗体,斜体,插入图像等)添加按钮(例如粗体,斜体,插入图像等),这些按钮作用于iframe中的选定内容.所有浏览器都提供了一种execCommand()方法(例如,参见MSDN和MDN)来执行其中的许多操作,尽管它们的确切工作方式和产生的标记存在一些差异.

这是它如何运作的基础知识.大多数编辑所做的其他大量复杂的事情并不是很明显,部分是为了消除浏览器之间的许多差异,部分是为了提供内置浏览器命令未涵盖的额外功能.这是一个非常复杂和困难的事情,要求正确,需要高度的专业知识和承诺,并不是一件轻松的事情.