如何做到編輯像文本域，又能夠即時所見呢？
答案就是使用iframe作為內容編輯區域。iframe本身也是一個嵌套頁面，它如何能夠被編輯呢？
這里有一些關鍵的屬性，它們可以做到讓iframe可以被編輯。
<!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 src="Scripts/jquery-1.8.2.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><b>D</b>");
$('#insert_img').click(function () {
// 在iframe中插入一張圖片
var img = '<img src="11.jpg" width="200"/>';
$("body", $d).append(img);
});
//設置選定的文本為粗體/正常
$('#btnB').click(function () {
var win = document.getElementById("editor").contentWindow;
win.document.execCommand("Bold", false, null);
win.focus();
});
//
$('#btnYuan').click(function () {
$('#txtYuan').val($('#editor').contents().find('body').html());
});
$('#preview').click(function () {
// 獲取iframe的body內容，用於顯示或者插入到數據庫
//alert($('#editor').contents().find('body').html());
$('#preview_area').html($('#editor').contents().find('body').html());
});
});
</script>
</head>
<body>
源碼顯示區
<textarea id="txtYuan" style="width: 600px; height: 200px">
</textarea>
<p>
實時編輯區
<iframe id="editor" width="600px" height="200px" style="border: solid 1px;"></iframe>
</p>
<input type="button" id="insert_img" value="插入圖片" />
<input type="button" id="preview" value="預覽" />
<input type="button" id="btnYuan" value="顯示源碼" />
<input type="button" id="btnB" value="加粗/正常" />
預覽區
<p style="border: 1px dashed #ccc;" id="preview_area"></p>
</body>
</html>
PS:
1、用ifr.contentDocument || ifr.contentWindow.document方式獲取iframe的文檔對象
2、分別設置designMode屬性為’on’，contentEditable屬性為’true’讓iframe可編輯
3、通過doc.body.innerHTML方法獲取內容，這個內容是我們最終要插入到數據庫或顯示在頁面上的（例如用戶評論）
4、在doc.write()方法前后加上doc.open(), doc.close()可以防止瀏覽器不停顯示加載中
效果如下圖
本文摘自：keepfool博文