一步步教你实现富本文编辑器（第一部分）
先打造好毛坯，添加上各位按钮与下拉选择框，如字体、字号、对齐、斜体、加粗、编号、缩进、背景色、前景色……为了方便我们按制样式，按钮是用span模拟的。
01.
02.
<!doctype html>
03.
<html dir="ltr" lang="zh-CN">
04.
<head>
05.
<meta charset="utf-8"/>
06.
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
07.
<style type="text/css">
08.
#editor{
09.
float:left; width:380px;background:#D5F3F4;padding-left:10px;
10.
}
11.
#editor span.button{
12.
display:block;float:left;border: 1px solid #CCC;margin:1px 5px 1px 0px ;color: #000;
13.
background: #D0E8FC;width:40px;height:20px;text-align:center;
14.
}
15.
#editor select{ display:block; float:left;height:20px;width:60px;margin-right:5px;}
16.
textarea {width:382px;height:100px;}
17.
</style>
18.
<title>富文本编辑器</title>
19.
</head>
20.
<body>
21.
<div id="editor">
22.
<span class="button">加粗</span>
23.
<span class="button">斜体</span>
24.
<span class="button">下划</span>
25.
<span class="button">居中</span>
26.
<span class="button">居左</span>
27.
<span class="button">居右</span>
28.
<span class="button">悬挂</span>
29.
<span class="button">缩进</span>
30.
<span class="button">无序</span>
31.
<span class="button">有序</span>
32.
<select>
33.
<option value="SimSun">宋体</option>
34.
<option value="LiSu">隶书</option>
35.
<option value="KaiTi_GB2312">楷体</option>
36.
<option value="YouYuan">幼圆</option>
37.
<option value="SimHei">黑体</option>
38.
<option value="Microsoft YaHei">雅黑</option>
39.
<option value="Comic Sans MS">Comic Sans MS</option>
40.
</select>
41.
<select>
42.
<option value="1">1</option>
43.
<option value="2">2</option>
44.
<option value="3">3</option>
45.
<option value="4">4</option>
46.
<option value="5">5</option>
47.
</select>
48.
<select>
49.
<option style="color:#000000" value="#000000">■■</option>
50.
<option style="color:#FF8080" value="#FF8080">■■</option>
51.
<option style="color:#FFFF00" value="#FFFF00">■■</option>
52.
<option style="color:#80FF00" value="#80FF00">■■</option>
53.
<option style="color:#00FFFF" value="#00FFFF">■■</option>
54.
<option style="color:#0000FF" value="#0000FF">■■</option>
55.
<option style="color:#FF00FF" value="#FF00FF">■■</option>
56.
</select>
57.
<select>
58.
<option style="color:#000000" value="#000000">■■</option>
59.
<option style="color:#FF8080" value="#FF8080">■■</option>
60.
<option style="color:#FFFF00" value="#FFFF00">■■</option>
61.
<option style="color:#80FF00" value="#80FF00">■■</option>
62.
<option style="color:#00FFFF" value="#00FFFF">■■</option>
63.
<option style="color:#0000FF" value="#0000FF">■■</option>
64.
<option style="color:#FF00FF" value="#FF00FF">■■</option>
65.
</select>
66.
</div>
67.
<br style="clear:both"/>
68.
<textarea></textarea>
69.
</body>
70.
</html>
然后我们就可以加入行为层代码了。富文本编辑器用到一个非常关键的脚本document.execCommand( command, showUI, value )。
我们把各命令的参数放到按钮的title中，并在onclick与onchange时调用它们。
01.
02.
<div id="editor">
03.
<span class="button" title="bold">加粗</span>
04.
<span class="button" title="italic">斜体</span>
05.
<span class="button" title="underline">下划</span>
06.
<span class="button" title="justifycenter">居中</span>
07.
<span class="button" title="justifyleft">居左</span>
08.
<span class="button" title="justifyright">居右</span>
09.
<span class="button" title="outdent">悬挂</span>
10.
<span class="button" title="indent">缩进</span>
11.
<span class="button" title="insertunorderedlist">无序</span>
12.
<span class="button" title="insertorderedlist">有序</span>
13.
<select title="fontname">
14.
<!-- 省略 -->
15.
</select>
16.
<select title="fontsize">
17.
<!-- 省略 -->
18.
</select>
19.
<select title="forecolor">
20.
<!-- 省略 -->
21.
</select>
22.
<select title="backcolor">
23.
<!-- 省略 -->
24.
</select>
25.
</div>
01.
window.onload = function(){
02.
var editor = document.getElementById("editor");
03.
var buttons = editor.getElementsByTagName("span");
04.
var selects = editor.getElementsByTagName("select");
05.
for(var i = 0,l= buttons.length;i<l;i++){
06.
buttons[i].onclick = new function(){
07.
var button=buttons[i];
08.
return function(){
09.
document.getElementById("exe").innerHTML =
10.
"调用了"+button.getAttribute("title")+"命令";
11.
}
12.
};
13.
};
14.
for(i=0,l=selects.length;i<l;i++){
15.
selects[i].onchange = new function(){
16.
var select = selects[i];
17.
return function(){
18.
document.getElementById("exe").innerHTML =
19.
"调用了"+select.getAttribute("title")+"命令,并传入了"+
20.
select.options[select.selectedIndex].value+"参数！";
21.
};
22.
};
23.
};
24.
}
好了，那么怎么样编辑文本区(textarea)的文字呢？错，文本区的文字本身就可以编辑，就是怎么也不可能显示其编辑后的效果。我们通常是在div与iframe中编辑。要想在DIV中编辑，设置其contentEditable = "true"，若iframe，还可以用designMode="on"。通常人们都是用ifame，这样做当然有它的道理，但一开始，照顾初心者，我们用div实现一下吧。
1.
2.
<div id="workaround">
3.
4.
</div>
1.
#workaround {width:382px;height:100px;border:1px solid #0065FD;}
那么怎么获得我们选中的文字？不，这个提法也不对，我们不是对文字直接进行操作，而对能对这些文字进行操作的对象进行操作……实在太拗口了！这就是传说中的Range对象了！
1.
var getRangeObject = function(){
2.
if(document.implementation.hasFeature("Range", "2.0")){
3.
return document.createRange();//W3C
4.
}else{
5.
return document.selection.createRange();//IE
6.
}
7.
}
但上面这个函数离我们的目标有些差距，无错，document.selection.createRange.execCommand('bold')就可以把我们选出中的文字加粗了，但火狐那边就不是这回事！这与它们的执行模式有关，当我们选中一段文字时，IE会立即把它们放进Range对象中，但符合W3C标准的游览器不会，它是空的，虽然我们手动加入……手动加入就手动加入吧，自己动手，丰衣足食！
01.
var getRangeObject = function() {
02.
if (window.getSelection){//W3C
03.
var range = document.createRange(),
04.
selection = window.getSelection();
05.
range.setStart(selection.anchorNode, selection.anchorOffset);
06.
range.setEnd(selection.focusNode, selection.focusOffset);
07.
return range;
08.
}else { //IE
09.
return document.selection.createRange();
10.
}
11.
}
但是还是失败了，究其原因，标准的Range对象(有关Range的介绍)是没有execCommand()方法。而IE的Range对象，说到底是TextRange对象，两者有很大差别。那怎么办？先放一放它，先实现了IE的再说，以后我们用iframe的document来执行execCommand()便是！
01.
window.onload = function(){
02.
var editor = document.getElementById("editor");
03.
var buttons = editor.getElementsByTagName("span");
04.
var selects = editor.getElementsByTagName("select");
05.
var workaround = document.getElementById("workaround");
06.
workaround.contentEditable = "true";
07.
for(var i = 0,l= buttons.length;i<l;i++){
08.
buttons[i].onclick = new function(){
09.
var command=buttons[i].getAttribute("title");
10.
return function(){
11.
document.selection.createRange().execCommand(command);//IE only
12.
}
13.
};
14.
};
15.
for(i=0,l=selects.length;i<l;i++){
16.
selects[i].onchange = new function(){
17.
var select = selects[i];
18.
return function(){
19.
var command = select.getAttribute("title"),
20.
value = select.options[select.selectedIndex].value;
21.
document.selection.createRange().execCommand(command,false,value);//IE only
22.
};
23.
};
24.
};
25.
}
注意，我们在按扭上面绑定了一个IE私有属性unselectable，并设置为on，这是防止当我们点击按钮时，TextRange对象因为选择对象转移，把原来选择的文本丢失了。其他游览器也有相似的功能，如safari，chrome为onselectstart="return false;" ，火狐为 style="-moz-user-select:none;"。
虽然兼容火狐失败，但作为副产品，搞了这个
下一部分,我们将改用iframe实现富本编辑器，处理众多的兼容问题！