• 微信公众号:美女很有趣。 工作之余,放松一下,关注即送10G+美女照片!

富文本编辑器

开发技术 开发技术 4小时前 3次浏览

富文本编辑器:

(Rich Text Editor,RTE)是一种可内嵌于浏览器,所见即所得的文本编辑器。它提供类似于Office Word 的编辑功能,方便那些不太懂HTML用户使用,富文本编辑器的应用非常广泛,它的历史与图文网页诞生的历史几乎一样长

 

wangEditor
wangEditor轻量级,小巧实用,配置方便,使用简单。可以自定义皮肤功能,免费开源。用户数量也很多,尤其是用在一些轻型环境,比如论坛社区回帖。wangEditor是国人出品的开源项目。

更多介绍及下载:http://www.wangeditor.com/

富文本编辑器

 

 原理:

富文本编辑器具有的基本功能就是对编辑区选中的文字通过工具栏提供的功能对文字或选区进行操作.比如文字加粗,斜体,创建表格,插入链接和图片等一系列的操作.然后可以通过源码查看查看编辑后产生的源代码.

 

有好多功能

编辑区

我们需要一个iframe.并将其designMode属性设置为”on”.这个iframe就具备了编辑功能.也是我们实现编辑器的基本容器.动态创建一个iframe代码如下

 

createIframe: function() {
    var _this = this;
    this.ifr = co.append(this.container, 'iframe', {'frameborder': 0, 'style': 'border:0; vertical-align:bottom', 'class': 'econtent' });
    this.doc =  this.ifr.contentDocument || this.ifr.contentWindow.document; // W3C || IE
    this.doc.designMode = 'on';
    this.doc.open();
    // margin为了消除iframe中的html上部的空白
    this.doc.write('<html><head><style>body{ margin:3px; word-wrap:break-word; word-break: break-all; }</style></head><body>GoodNessEditor</body></html>');
    this.ifr.contentWindow.focus();
    this.doc.close();
    // 当iframe失去焦点.偷偷将代码存入textare中
    co.addEvent(this.ifr.contentWindow, 'blur', function() {
        _this.txtarea.value = _this.doc.body.innerHTML;
    });
},

 

 

程序员灯塔
转载请注明原文链接:富文本编辑器
喜欢 (0)