富文本编辑器所见即所得原理是如何实现的？

本文共计951个文字，预计阅读时间需要4分钟。

许多人都使用过多种富文本编辑器。富文本编辑器常用于编辑博客、用户互动等。富文本编辑器分为所见即所得和所见即所得两种类型。两种富文本编辑器的实现原理不同。

相信很多人都使用过多种富文本编辑器，富文本编辑器常用于编辑博客、用户交互，富文本编辑器分为两种：所见即所得和非所见即所得

两种富文本编辑器的实现原理是不相同的。

1. 非所见即所得编辑器

这种编辑器的实现原理很简单，用textarea元素就可以实现，假如要实现粗体、斜体、下划线、颜色字、图片的效果，只需在字的中间加上自定义标签即可，例如： [b]富文本编辑器[b] ，[img]src=”www.google.com.hk/intl/zh-CN/images/logo_cn.png”[img]当然这些规则你得自己通过js进行定制。当POST提交后，再把这些标签转换为html标签。

2. 所见即所得编辑器

在1中我提到的几种效果，我们无法在textarea中见到立竿见影的效果（所见即所得），而文本域本身也只是支持一些字符的输入，并不支持显示html。

如何做到编辑像文本域，又能够即时所见呢？答案就是使用iframe作为内容编辑区域。iframe本身也是一个嵌套页面，它如何能够被编辑呢？这里有一些关键的属性，它们可以做到让iframe可以被编辑。

还是直接上代码来得方便一些，代码也很少。