所见即所得富文本编辑器实现原理

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

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

1. 非所见即所得编辑器

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

2. 所见即所得编辑器

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

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

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

很重要的几点
(1). 用ifr.contentDocument || ifr.contentWindow.document方式获取iframe的文档对象
(2). 分别设置designMode属性为’on’,contentEditable属性为’true’让iframe可编辑
(3). 通过doc.body.innerHTML方法获取内容,这个内容是我们最终要插入到数据库或显示在页面上的(例如用户评论)

大家可以运行上面的代码,可以看到如下截图中的效果:

但是在实际运行的时候,你是否发现除了chrome浏览器外(用IETester, Firefox, Chrome测试)打开这个页面都处于正在加载的状态(那个轮子转啊转,转个不停…)

只要在doc.write()方法前后加上doc.open(), doc.close()就可以了(在写之前开启,写完之后关闭)。

最后,我们的Web程序中经常使用jQuery作为基础类库,那就把上面的代码也改造为jQuery吧。代码如下:

效果图如下:

是不是觉得很简单呢?

1 2 收藏 1 评论

相关文章

可能感兴趣的话题



直接登录
最新评论
  • DeepKolos 大二,前端菜鸟 2016/08/09

    除了iframe,直接div属性里面加contenteditable也可以,额,没有处理光标,这个还是很让人挺头疼的

跳到底部
返回顶部