富文本編輯器開發原理
阿新 • • 發佈：2018-01-09
cti -c zh-cn 操作 net des eight var type 富文本編輯器的開發主要使用到東西如下：
1、iframe
2、將iframe的designMode設置為‘on‘
3、將iframe的contentEditable設置為true
4、獲取iframe對象的contentDocument（註意兼容性）
5、使用contentDocument對象的write方法寫入一個html文檔，為解決兼容性問題需要再使用write方法之前使用open方法、之後使用close方法。
6、獲取文檔內容使用doc.body.innerHTML
7、實現加粗之類操作的方式是調用document.execCommand方法，具體參數參看https://developer.mozilla.org/zh-CN/docs/Web/API/Document/execCommand
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<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>helloworld！</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>
</body>
</html>
參考博客：http://blog.csdn.net/yelbosh/article/details/7693236
富文本編輯器開發原理