富文本编辑器，可以让我们更方便的设计规划我们自己想要的应用程序。富文本编辑器的原理是在HTML中嵌入一个空的HTML页面，然后通过设置designMode属性，使得这个空白HTML可被编辑，而编辑后的源码就是原理body中的HTML代码。designMode有两个属性，是on和off，当设置为on的时候，整个文档就处于可编辑的状态，然后就可以像word一样进行文字处理。
先看一下实施后的简易富文本编辑器，因为只是做个示例，所以并没有把所有功能都加入进去，只是做了很少的一部分，以下是代码
1 <html> 2 <head> 3 <script type="text/javascript"> 4 window.onload = function(){ 5 frames['editCon'].document.designMode = 'on'; 6 var table = document.getElementById('toolBar'); 7 table.addEventListener('change',function(event){ 8 var target = event.target; 9 if(target.tagName.toLowerCase() == 'select'){ 10 frames['editCon'].document.execCommand(target.id,false,target.options[target.selectedIndex].value); 11 } 12 },false); 13 table.addEventListener('click',function(event){ 14 var target = event.target; 15 if(target.tagName.toLowerCase() == 'input'){ 16 frames['editCon'].document.execCommand(target.id,false,null); 17 } 18 },false) 19 document.getElementById('VC').addEventListener('click',function(event){ 20 var text = document.getElementById('htmlCon'), 21 frame = document.getElementById('editCon'); 22 if(text.style.display == 'none'){ 23 text.innerHTML = frames['editCon'].document.body.innerHTML; 24 text.style.display = 'inline-block'; 25 frame.style.display = 'none'; 26 }else{ 27 frame.style.display = 'inline-block'; 28 text.style.display = 'none'; 29 } 30 }) 31 } 32 </script> 33 </head> 34 <body> 35 <h1>富文本编辑器</h1> 36 <table id="toolBar" width=600> 37 <tr> 38 <td>color:<select id="backcolor"><option value="#f00">red</option><option value="#00f">blue</option></select></td> 39 <td>size:<select id="fontsize"><option value=10>10</option><option value=15>15</option></select></td> 40 <td><input type="button" value="I" id="italic"/></td> 41 </tr> 42 </table> 43 <input type="button" id="VC" value="Code or View"/><br/> 44 <textarea id="htmlCon" name="htmlCon" style="display:none;600px;height:500px;"></textarea> 45 <iframe id="editCon" name="editCon" style="600px;height:500px;"> 46 <html> 47 <head> 48 </head> 49 <body> 50 </body> 51 </html> 52 </iframe> 53 </body> 54 </html>
由于designMode需要在页面这个加载完以后才能实施，所以必须用onload来进行设置
1 <html> 2 <head> 3 <script type="text/javascript"> 4 window.onload = function(){ 5 frames['editCon'].document.designMode = 'on'; 6 } 7 </script> 8 </head> 9 <body> 10 <h1>富文本编辑器</h1> 11 <iframe id="editCon" name="editCon" style="600px;height:500px;"> 12 <html> 13 <head> 14 </head> 15 <body> 16 </body> 17 </html> 18 </iframe> 19 </body> 20 </html>
在以上的代码运行后，就已经可以再iframe中编辑文字了，只不过由于还没有加入功能键，所以只能打字。。。。
接下来就是要操作富文本了，富文本的操作主要是通过document.execCommand()进行，这个方法传递三个参数：要执行的命令，表示浏览器是否应该为当前命令提供用户界面的一个布尔值(一般为false即可)，和执行命令必须的一个值(没有则为null)。FireFox在第二个参数设置为true是抛出错误。具体参数列表这里就不列出来了。这个函数是对你选中的内容进行操作的。所以不用再自己去选择操作的具体对象。
于是先在原有的HTML上加入对文本编辑器的效果控制按钮：
<table id="toolBar" width=600> <tr> <td>color:<select id="backcolor"><option value="#f00">red</option><option value="#00f">blue</option></select></td> <td>size:<select id="fontsize"><option value=10>10</option><option value=15>15</option></select></td> <td><input type="button" value="I" id="italic"/></td> </tr> </table>
然后是相应的js
1 var table = document.getElementById('toolBar'); 2 table.addEventListener('change',function(event){ 3 var target = event.target; 4 if(target.tagName.toLowerCase() == 'select'){ 5 frames['editCon'].document.execCommand(target.id,false,target.options[target.selectedIndex].value); 6 } 7 },false); 8 table.addEventListener('click',function(event){ 9 var target = event.target; 10 if(target.tagName.toLowerCase() == 'input'){ 11 frames['editCon'].document.execCommand(target.id,false,null); 12 } 13 },false);
若要考虑跨浏览器的话，就要注意addEventListener在IE中应该用attachEvent代替，同时加入event=event||window.event ，因为IE中event是建立在window下的一个属性，并不会直接赋值给参数event，同时target = event.target ||event.srcElement。
接下来就是代码导出的问题，即显示源码，这个在文本编辑器内容提交时尤其重要，就是将iframe中提取出HTML源码，并插入到指定的地方，我们可以通过以下的方式得到HTML源码。
1 text.innerText = frames['editCon'].document.body.innerHTML;
同时我们也可以做个显示源码的按钮，来看看效果：
<input type="button" id="VC" value="Code or View"/>
1 document.getElementById('VC').addEventListener('click',function(event){ 2 var text = document.getElementById('htmlCon'), 3 frame = document.getElementById('editCon'); 4 if(text.style.display == 'none'){ 5 text.innerText = frames['editCon'].document.body.innerHTML; 6 text.style.display = 'inline-block'; 7 frame.style.display = 'none'; 8 }else{ 9 frame.style.display = 'inline-block'; 10 text.style.display = 'none'; 11 } 12 })
这样就可以看到源码了。然后就是整合以后的代码，如下：
<html> <head> <script type="text/javascript"> window.onload = function(){ frames['editCon'].document.designMode = 'on'; var table = document.getElementById('toolBar'); table.addEventListener('change',function(event){ var target = event.target; if(target.tagName.toLowerCase() == 'select'){ frames['editCon'].document.execCommand(target.id,false,target.options[target.selectedIndex].value); } },false); table.addEventListener('click',function(event){ var target = event.target; if(target.tagName.toLowerCase() == 'input'){ frames['editCon'].document.execCommand(target.id,false,null); } },false); document.getElementById('VC').addEventListener('click',function(event){ var text = document.getElementById('htmlCon'), frame = document.getElementById('editCon'); if(text.style.display == 'none'){ text.innerText = frames['editCon'].document.body.innerHTML; text.style.display = 'inline-block'; frame.style.display = 'none'; }else{ frame.style.display = 'inline-block'; text.style.display = 'none'; } }) } </script> </head> <body> <h1>富文本编辑器</h1> <table id="toolBar" width=600> <tr> <td>color:<select id="backcolor"><option value="#f00">red</option><option value="#00f">blue</option></select></td> <td>size:<select id="fontsize"><option value=10>10</option><option value=15>15</option></select></td> <td><input type="button" value="I" id="italic"/></td> </tr> </table> <input type="button" id="VC" value="Code or View"/><br/> <textarea id="htmlCon" name="htmlCon" style="display:none;600px;height:500px;"></textarea> <iframe id="editCon" name="editCon" style="600px;height:500px;"> <html> <head> </head> <body> </body> </html> </iframe> </body> </html>