微信号:FrontDev

介绍:分享 Web 前端相关的技术文章、工具资源、精选课程、热点资讯

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

2016-08-09 20:43 前端大全

(点击上方公众号,可快速关注)

作者:keepfool

链接:www.cnblogs.com/keepfool/archive/2011/12/21/2295335.html


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


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


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可以被编辑。


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


<html>

<script language="javascript" type="text/javascript">

    //初始化编辑器

    function init() {

        var ifr = document.getElementById("editor");

        var doc = ifr.contentDocument || ifr.contentWindow.document; // W3C || IE

        doc.designMode = "on";

        doc.contentEditable = true;

        doc.write('<html><head><style>body{ margin:3px; word-wrap:break-word; word-break: break-all; }</style></head><body>GoodNessEditor</body></html>');

        alert(doc.body.innerHTML);

    }

 

    //设置选定的文本为粗体/正常

    function setBold() {

        var win = document.getElementById("editor").contentWindow;

        win.document.execCommand("Bold", false, null);

        win.focus();

    }

</script>

<p>

    <input type="button" id="bBtn" value="B" style="font-weight:bold" onclick="setBold();" />

</p>

<p>

    <iframe id="editor" width="600px" height="400px" style="border:solid 1px;"></iframe>

</p>

<script type="text/javascript">

    init();

</script>

</html>


很重要的几点

(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吧。代码如下:


<!DOCTYPE HTML>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>KF富文本编辑器</title>

    <script type="text/javascript" src="jquery.min.js">

    </script>

    <script type="text/javascript">

        $(function () {

            $d = $("#editor")[0].contentWindow.document; // IE、FF都兼容

            $d.designMode = "on";

            $d.contentEditable = true;

            $d.open();

            $d.close();

            $("body", $d).append("<div>A</div><div>B</div><div>C</div>");

 

            $('#insert_img').click(function () {

                // 在iframe中插入一张图片

                var img = '<img src="' + $('#path').val() + '" />';

                $("body", $d).append(img);

            });

 

            $('#preview').click(function () {

                // 获取iframe的body内容,用于显示或者插入到数据库

                alert($('#editor').contents().find('body').html());

                $('#preview_area').html($('#editor').contents().find('body').html());

 

            });

        });

 

    </script>

 

</head>

 

<body>

 

 

    <p><iframe id="editor" width="600px" height="200px" style="border:solid 1px;"></iframe></p>

    <input type="text" id="path" value="http://www.google.com.hk/intl/zh-CN/images/logo_cn.png" />

    <input type="button" id="insert_img" value="插入图片" />

    <input type="button" id="preview" value="预览" />

 

    <p style="border: 1px dashed #ccc;" id="preview_area"></p>

 

</body>

</html>


效果图如下:



是不是觉得很简单呢?



【今日微信公号推荐↓】

更多推荐请看值得关注的技术和设计公众号


其中推荐了包括技术设计极客 和 IT相亲相关的热门公众号。技术涵盖:Python、Web前端、Java、安卓、iOS、PHP、C/C++、.NET、Linux、数据库、运维、大数据、算法、IT职场等。点击《值得关注的技术和设计公众号》,发现精彩!


 
前端大全 更多文章 母鸡与前端工程师 再谈雅虎关于性能优化的 N 条规则 浅谈Web自适应 在JavaScript中借用方法 Vue.js 60 分钟快速入门
猜您喜欢 Redis Cluster架构优化 携程App网络服务通道治理和性能优化@2016 Socket和ServerSocket学习笔记 你不可不知的:2016年大数据发展趋势 【数据看过年】全球首份互联网新年生活方式报告