文章/答案/技术大牛

发布

社区首页 >问答首页 >如何创建富文本编辑器

问如何创建富文本编辑器
EN

Stack Overflow用户

提问于 2011-05-15 16:04:49

回答 2查看 39.8K关注 0票数 44

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

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

那么背后的概念是什么呢？

谢谢:)

html

rich-text-editor

javascript

回答 2

Stack Overflow用户

回答已采纳

发布于 2011-05-15 19:47:43

下面是最简单的方法。它被TinyMCE和CKEditor以及许多其他公司使用。有许多变体:特别是，如果您正在创建代码编辑器，那么可以使用textareas和等宽字体来实现一些巧妙的技巧。

动态创建iframe并将可编辑内容放入该iframe的文档中
通过将其文档的designMode属性设置为"on“或将其<body>元素的contentEditable属性设置为true，将该iframe设置为可编辑。注意，在火狐中对designMode的支持早于contenteditable，因此错误要少得多。
在主文档中的敏感位置(如可编辑的iframe的正上方)添加按钮(如粗体、斜体、插入图像等)，这些按钮作用于iframe中的选定内容。所有浏览器都提供了一个execCommand()方法(例如，参见MSDN和MDN )来执行其中的许多操作，尽管它们的工作方式和生成的标记有所不同。

这就是它是如何工作的最基本的原理。大多数编辑器做的很多其他复杂的事情并不是一目了然的，部分是为了消除浏览器之间的许多差异，部分是为了提供内置浏览器命令没有涵盖的额外功能。这是一件非常复杂和困难的事情，需要高度的专业知识和承诺，不能掉以轻心。

票数 61

Stack Overflow用户

发布于 2011-05-15 16:12:12

我不建议您查看其他代码，但我建议您看看jWYSIWYG，看看它是如何在jQuery中编码的。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/6007242

复制

相似问题

问如何创建富文本编辑器
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何创建富文本编辑器EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何创建富文本编辑器
EN