转载请注明出处：http://www.cnblogs.com/enzozo/p/4357031.html
写在前面：
本文本编辑器具备功能：选择字体大小、颜色、加粗、斜体、下划线。点击 'Submit' 后生成预览，再点击 'Edit' 后可继续编辑。
主要利用的是 document.execCommand()指令 和 div的contentEditable属性（值为true或空或inherit时，div中的内容可编辑，为false时不可编辑）。
正文开始：
index.html:
<!DOCTYPE html>
<html>
<head>
<title> 捉妖菌のEditor </title>
<link href="index.css" rel="stylesheet">
<script type="text/javascript" src="index.js"></script>
</head>
<body>
<div id="toolbar">
<span>Size:</span>
<select id="size">
<option value="3">Tiny</option>
<option value="4">Small</option>
<option value="5">Normal</option>
<option value="6">Big</option>
<option value="7">Large</option>
</select>
<span>Color:</span>
<select id="color">
<option value="black" style="color:black">Black</option>
<option value="gray" style="color:gray">Gray</option>
<option value="brown" style="color:brown">Brown</option>
<option value="red" style="color:red">Red</option>
<option value="pink" style="color:pink">Pink</option>
<option value="yellow" style="color:yellow">Yellow</option>
<option value="orange" style="color:orange">Orange</option>
<option value="blue" style="color:blue">Blue</option>
<option value="Green" style="color:green">Green</option>
</select>
<span><strong>B</strong></span>
<input type="checkbox" id="bold">
<span><i>I</i></span>
<input type="checkbox" id="italic">
<span style="text-decoration:underline">U</span>
<input type="checkbox" id="underline">
</div>
<div>
<input type="button" value="Submit" id="submit">
<input type="button" value="Edit" id="edit">
</div>
<div id="editor" class="editable"></div>
</body>
</html>
index.css:
.editable, .display {
resize: vertical;
overflow: auto;
border: 1px solid silver;
border-radius: 5px;
min-height: 400px;
padding: 1em;
margin-top: 20px;
}
body {
font-size: 13pt;
font-family: "Microsoft Yahei", Georgia, Serif;
}
#submit, #edit {
position: absolute;
top: 22px;
right: 20px;
height: 30px;
}
#edit {
display: none;
}
#toolbar {
margin-top: 20px;
border: 1px solid silver;
padding: 5px;
background-color: #F2F2F2;
border-radius: 5px;
}
.editable {
box-shadow: inset 0 0 10px silver;
}
.display {
box-shadow: 0px;
}
注：因为div #editor有两种形式：编辑和预览。所以两种模式下，div需呈现出不同的样式，以免使用者产生不解。通过js更改#editor的className即可达到效果。
index.js:
$ = function(id) { return document.getElementById(id); };
$$ = function(tag) { return document.getElementsByTagName(tag); };
window.onload = function() {
$('editor').contentEditable = true;
$('size').onchange = function() {
var s = parseInt($('size').value);
$('editor').focus();
document.execCommand('FontSize', false, s);
}
$('color').onchange = function() {
$('editor').focus();
document.execCommand('ForeColor', false, $('color').value);
};
$('bold').onchange = function() {
$('editor').focus();
document.execCommand('Bold');
};
$('italic').onchange = function() {
$('editor').focus();
document.execCommand('Italic');
};
$('underline').onchange = function() {
$('editor').focus();
document.execCommand('Underline');
};
$('submit').onclick = function() {
$('editor').contentEditable = false;
$('toolbar').style.visibility = 'hidden';
$('edit').style.display = 'block';
$('submit').style.display = 'none';
$('editor').className = 'display';
}
$('edit').onclick = function() {
$('editor').contentEditable = true;
$('toolbar').style.visibility = 'visible';
$('edit').style.display = 'none';
$('editor').className = 'editable';
$('submit').style.display = 'block';
}
};
注：document.execCommand指令中，参数一为属性名，第二个参数为true(显示对话框)或false(不显示对话框)，最后一个参数是针对第一个参数的值。
最后上一张测试图：
转载请注明出处：http://www.cnblogs.com/enzozo/p/4357031.html