富文本編輯器又稱為WYSIWYG(所見即所得)，其本質就是在一個頁面元素中嵌入HTML代碼，並且這個元素可以像文檔輸入框一樣進行文本的編輯，它同時還可以設置文本樣式。寫博客的工具就是一個功能豐富的富文本編輯器，編輯郵件以及論壇發貼都用到富文本編輯器。
啟動富文本編輯：設置contenteditable
讓元素的內嵌HTML可以編輯，有三種實現方法：
1.在HTML標簽里寫入contenteditable即可。
<div style="border:1px solid #f00;width:100px;height:100px" contenteditable>
2.在腳本中設置對應元素的contentEditable值為true。這個屬性有三種取值，false/true/inherit分別對應“關閉”/“開啟”/“繼承”。
document.getElementById("editor").contentEditable = true;
3.對於內嵌框架可以設置designMode="on"，不過這種方式兼容性不太好。
富文本編輯器樣式命令：document.execCommand()
其實元素設置contentedable后就已經實現了一個最基本的富文本編輯器，只是這個編輯器和文本輸入框一樣，實在簡陋。如果它能很便捷的設置內容的樣式，那就完美了。
與富文本樣式交互的方法是document.execCommand()。execCommand函數傳遞三個參數，第一個參數為命令，第二個參數表示是否需要提示用戶提供給該命令一個值，第三個參數表示執行當前命令的參數值。有些瀏覽器設置第二個參數為true會報錯，所以為了便於移植，通常我們設置為false。
比如要給選中文本字體加粗，命令表達式當如下所示：
document.execCommand(bold, false, null);
常用命令有：
backcolor:設置文檔背景顏色、bold:文本加粗、copy:復制到剪切板、createlink:給選中文本設置連接、cut:剪切、delete:刪除文本、fontname:字體名稱
fontsize:字體大小、forecolor:字體換色、formatblock:用HTML標簽格式化選中文本、indet:縮進、inserthorizontalrule:插入<hr>、insertimage:插入圖片
insertorderedlist:插入<ol>、insertunorderedlist:插入<ul>、insertparagraph:插入<p>、italic:文本斜體、justifycenter:文本居中、justifyleft:左對齊
outdent:減少縮進、paste:粘貼剪切板內容、removeformat:刪除樣式、selectall:選中所有文本、underline:添加下划線、unlink:撤銷鏈接。
實現簡易富文本編輯器
一個簡易的富文本編輯器應該有一系列的樣式按鈕，一個編輯框。這里我就簡單實現四個樣式操作按鈕。
<!-- 樣式操作按鈕 --> <button id="btn1"></button> <button id="btn2"></button> <button id="btn3"></button> <button id="btn4"></button> <!-- 編輯框 --> <div id="editor"> Click to Editor... </div> <input id="printContent" type="button" value="打印編輯器內容">
稍微給按鈕以及編輯器設置下樣式。
<style type="text/css"> #editor { width:600px; height:200px; border:1px solid #ccc; } button { margin:1px; border:1px solid #aaa; background:#ffe; cursor:pointer; overflow:hidden; } button:hover { background:#ccc; border:1px solid #00f; } </style>
頁面畫出來后，接下來我們來實現其功能。
讓編輯器生效只需
1.開啟元素的編輯功能editor.contentEditable = true;
2.給所有樣式按鈕綁定啟動document.execCommand的事件。
//初始化 function initEditor() { openOrCloseEditor("editor", "true");//開啟元素編輯 bindBtnCommand();//給樣式按鈕綁定命令 }
開啟元素編輯的openOrCloseEditor函數實現如下：
/** * * 功能： 開啟元素編輯功能 * 輸入： el：編輯器ID; operate：Boolean值，表示啟動還是關閉 */ function openOrCloseEditor(el, operate) { var editor = document.getElementById(el); editor.contentEditable = operate; }
綁定樣式按鈕bindBtnCommand函數實現如下：
//按鈕綁定命令 function bindBtnCommand() { var btns = document.getElementsByTagName("button"), btnConfigs = "backcolor|#f00|設置背景色 bold|null|字體加粗 indent|null|縮進 fontName|微軟雅黑|轉換字體".split(" "), len = btnConfigs.length; for(var i = 0, btnConfig; btnConfig = btnConfigs[i]; i++) { (function(btnConfig, btn) { var msg = btnConfig.split("|"), lab = msg[0], value = msg[1], title = msg[2]; btn.innerHTML = lab; btn.title = title; btn.onclick = function(e) { document.execCommand(lab, false, value); } })(btnConfig, btns[i]); } }
接下來實現“打印編輯內容”按鈕功能：
//獲取編輯器內嵌內容 function getContent(el) { var editor = document.getElementById(el); return editor.innerHTML; } //打印按鈕綁定觸發事件 document.getElementById("printContent").onclick = function(e) { var content = getContent("editor"); document.write(content); };
最后調用initEditor使編輯器生效
initEditor();
完整代碼如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>簡易富文本編輯器.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
#editor {width:600px;height:200px;border:1px solid #ccc;
}
button {margin:1px;border:1px solid #aaa;background:#ffe;cursor:pointer;overflow:hidden;}
button:hover {background:#ccc;border:1px solid #00f;}
</style>
</head>
<body>
<button id="btn1"></button>
<button id="btn2"></button>
<button id="btn3"></button>
<button id="btn4"></button>
<div id="editor">
Click to Editor...
</div>
<input id="printContent" type="button" value="打印編輯器內容">
<script type="text/javascript">
initEditor();
//初始化
function initEditor() {
openOrCloseEditor("editor", "true");//開啟元素編輯
bindBtnCommand();//給樣式按鈕綁定命令
}
/**
*
* 功能： 開啟元素編輯功能
* 輸入： el：編輯器ID; operate：Boolean值，表示啟動還是關閉
*/
function openOrCloseEditor(el, operate) {
var editor = document.getElementById(el);
editor.contentEditable = operate;
}
//按鈕綁定命令
function bindBtnCommand() {
var btns = document.getElementsByTagName("button"),
btnConfigs = "backcolor|#f00|設置背景色 bold|null|字體加粗 indent|null|縮進 fontName|微軟雅黑|轉換字體".split(" "),
len = btnConfigs.length;
for(var i = 0, btnConfig; btnConfig = btnConfigs[i]; i++) {
(function(btnConfig, btn) {
var msg = btnConfig.split("|"),
lab = msg[0],
value = msg[1],
title = msg[2];
btn.innerHTML = lab;
btn.title = title;
btn.onclick = function(e) {
document.execCommand(lab, false, value);
}
})(btnConfig, btns[i]);
}
}
//獲取編輯器內嵌內容
function getContent(el) {
var editor = document.getElementById(el);
return editor.innerHTML;
}
//打印按鈕綁定觸發事件
document.getElementById("printContent").onclick = function(e) {
var content = getContent("editor");
document.write(content);
};
</script>
</body>
</html>
簡易富文本編輯器達成！