相信很多人都使用過多種富文字編輯器，富文字編輯器常用於編輯部落格、使用者互動，富文字編輯器分為兩種：所見即所得和非所見即所得
兩種富文字編輯器的實現原理是不相同的。
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 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<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吧。程式碼如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
<!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> |
效果圖如下：
是不是覺得很簡單呢？