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