所見即所得富文本編輯器實現原理

相信很多人都使用過多種富文本編輯器，富文本編輯器常用于編輯博客、用戶交互，富文本編輯器分為兩種：所見即所得和非所見即所得

兩種富文本編輯器的實現原理是不相同的。

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>

效果圖如下：

是不是覺得很簡單呢？

【關注】keepfool

posted @ 2011-12-21 00:20 keepfool 閱讀(16522) 評論(27) 收藏舉報

刷新頁面返回頂部

keepfool

每個人都會碰到很多難題，想要解開這些難題，就必須專心地做下去，就需要最瘋狂的那股癡勁兒，但這種癡卻不是山一般壓在你肩上的重量，而是你內心深處最向往的那些喜悅。

所見即所得富文本編輯器實現原理

公告