HTML在线编辑器雏形
HTML在线编辑器原理概述
关于HTML在线编辑器的原理，普遍的观点是，原理很简单，但是真正实现起来比较复杂，因为要考虑浏览器的兼容性问题。有的网友将HTML在线编辑器的原理总结为：
1. designMode = "on" 或 contenteditable = "true"
2. document.execCommand()
即设置 document 的 designMode 属性为 on 或设置 contenteditable 为 true，使控件处于可编辑状态，然后通过执行 document.execCommand() 使文字加粗、倾斜、加下划线等功能。
HTML在线编辑器雏形实现
下面根据HTML在线编辑器的原理，实现了一个HTML在线编辑器的雏形。
（1）通过设置 designMode 创建一个可编辑区域
在<body>内放置一个<iframe>
<iframe id="tkeditor" style="width: 500px; height: 200px; border: 1px solid #000000;"></iframe>
iframe 是一个浮动的内嵌框架，它是我们实现在线编辑器的基本容器，但这时 iframe 是不可编辑的，我们需要js代码设置 iframe 的 designMode 属性为 on，从而实现 iframe 的可编辑模式。首先在 head 标签内添加以下 js 代码：
1 function setdesignMode()
2 {
3 // window.frames.tkeditor.document.designMode = "on";
4 // window.frames["tkeditor"].document.designMode = "on";
5 // document.getElementById("tkeditor").contentDocument.designMode = "on";
6 // document.getElementById("tkeditor").contentWindow.document.designMode = "on";
7 tkeditor.document.designMode = " on " ;
8 // 以上几行代码在Chrome和搜狗浏览器上通过测试，均能使 iframe 设置为可编辑状态。
9 }
2 {
3 // window.frames.tkeditor.document.designMode = "on";
4 // window.frames["tkeditor"].document.designMode = "on";
5 // document.getElementById("tkeditor").contentDocument.designMode = "on";
6 // document.getElementById("tkeditor").contentWindow.document.designMode = "on";
7 tkeditor.document.designMode = " on " ;
8 // 以上几行代码在Chrome和搜狗浏览器上通过测试，均能使 iframe 设置为可编辑状态。
9 }
然后，在<body>中添加 onload 事件：
<body onload="setdesignMode()"></body>
这样就实现了 iframe 的可编辑状态。
（2） 实现加粗、倾斜、下划线功能
在 iframe 上方添加三个按钮，设置相应的单击事件：
<
input
type
="button"
name
="Bold"
value
="加粗"
onclick
="tkeditor.document.execCommand('bold',false,null)"
/>
< input type ="button" name ="Italic" value ="斜" onclick ="tkeditor.document.execCommand('italic',false,null)" />
<input type="button" name="Underline" value="下划线" onclick="tkeditor.document.execCommand('underline',false,null)" />
< input type ="button" name ="Italic" value ="斜" onclick ="tkeditor.document.execCommand('italic',false,null)" />
<input type="button" name="Underline" value="下划线" onclick="tkeditor.document.execCommand('underline',false,null)" />
这样，一个HTML在线编辑器的雏形就出来的，打开浏览器试一试效果。 可以添加其他需要的功能，只要将"bold","italic","underline"修改为相应的命令，其他的命令字符串见 Rich-Text Editing in Mozilla
完整代码 下载（在Chrome和搜狗浏览器中测试通过）
1
<
html
xmlns
="http://www.w3.org/1999/xhtml"
>
2 < head >
3 < meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" />
4 < title > 在线编辑器 </ title >
5 < script type ="text/javascript" >
6 <!--
7 function setdesignMode()
8 {
9 // window.frames.tkeditor.document.designMode = "on";
10 // window.frames["tkeditor"].document.designMode = "on";
11 // document.getElementById("tkeditor").contentDocument.designMode = "on";
12 // document.getElementById("tkeditor").contentWindow.document.designMode = "on";
13 tkeditor.document.designMode = " on " ;
14 // 以上几行代码在Chrome和搜狗浏览器上通过测试，均能使 iframe 设置为可编辑状态。
15 }
16 -->
17 </ script >
18 </ head >
19
20 < body onload ="setdesignMode()" >
21 < input type ="button" name ="Bold" value ="加粗" onclick ="tkeditor.document.execCommand('bold',false,null)" />
22 < input type ="button" name ="Italic" value ="斜" onclick ="tkeditor.document.execCommand('italic',false,null)" />
23 < input type ="button" name ="Underline" value ="下划线" onclick ="tkeditor.document.execCommand('underline',false,null)" />
24 < input type ="button" name ="justifyLeft" value ="居左" onclick ="tkeditor.document.execCommand('justifyLeft',false,null)" />
25 < input type ="button" name ="justifyCenter" value ="居中" onclick ="tkeditor.document.execCommand('justifyCenter',false,null)" />
26 < input type ="button" name ="justifyRight" value ="居右" onclick ="tkeditor.document.execCommand('justifyRight',false,null)" />
27 < input type ="button" name ="redo" value ="重做" onclick ="tkeditor.document.execCommand('redo',false,null)" />
28 < input type ="button" name ="undo" value ="撤消" onclick ="tkeditor.document.execCommand('undo',false,null)" />
29 < input type ="button" name ="backColor" value ="背景色" onclick ="tkeditor.document.execCommand('backColor',false,'#FF00FF')" />
30 < br />
31 < input type ="button" name ="createLink" value ="链接" onclick ="tkeditor.document.execCommand('createLink',false,'http://www.sunzhiyue.com')" />
32 < input type ="button" name ="unlink" value ="取消链接" onclick ="tkeditor.document.execCommand('unlink',false,null)" />
33 < input type ="button" name ="fontSize" value ="字体大小" onclick ="tkeditor.document.execCommand('fontSize',false,'5')" />
34 < input type ="button" name ="foreColor" value ="字体颜色" onclick ="tkeditor.document.execCommand('foreColor',false,'#00FFFF')" />
35 < input type ="button" name ="insertImage" value ="图片" onclick ="tkeditor.document.execCommand('insertImage',false,'http://www.baidu.com/img/baidu_sylogo1.gif')" />
36 < br />
37 < iframe id ="tkeditor" style ="width: 500px; height: 200px; border: 1px solid #000000;" ></ iframe >
38 </ body >
2 < head >
3 < meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" />
4 < title > 在线编辑器 </ title >
5 < script type ="text/javascript" >
6 <!--
7 function setdesignMode()
8 {
9 // window.frames.tkeditor.document.designMode = "on";
10 // window.frames["tkeditor"].document.designMode = "on";
11 // document.getElementById("tkeditor").contentDocument.designMode = "on";
12 // document.getElementById("tkeditor").contentWindow.document.designMode = "on";
13 tkeditor.document.designMode = " on " ;
14 // 以上几行代码在Chrome和搜狗浏览器上通过测试，均能使 iframe 设置为可编辑状态。
15 }
16 -->
17 </ script >
18 </ head >
19
20 < body onload ="setdesignMode()" >
21 < input type ="button" name ="Bold" value ="加粗" onclick ="tkeditor.document.execCommand('bold',false,null)" />
22 < input type ="button" name ="Italic" value ="斜" onclick ="tkeditor.document.execCommand('italic',false,null)" />
23 < input type ="button" name ="Underline" value ="下划线" onclick ="tkeditor.document.execCommand('underline',false,null)" />
24 < input type ="button" name ="justifyLeft" value ="居左" onclick ="tkeditor.document.execCommand('justifyLeft',false,null)" />
25 < input type ="button" name ="justifyCenter" value ="居中" onclick ="tkeditor.document.execCommand('justifyCenter',false,null)" />
26 < input type ="button" name ="justifyRight" value ="居右" onclick ="tkeditor.document.execCommand('justifyRight',false,null)" />
27 < input type ="button" name ="redo" value ="重做" onclick ="tkeditor.document.execCommand('redo',false,null)" />
28 < input type ="button" name ="undo" value ="撤消" onclick ="tkeditor.document.execCommand('undo',false,null)" />
29 < input type ="button" name ="backColor" value ="背景色" onclick ="tkeditor.document.execCommand('backColor',false,'#FF00FF')" />
30 < br />
31 < input type ="button" name ="createLink" value ="链接" onclick ="tkeditor.document.execCommand('createLink',false,'http://www.sunzhiyue.com')" />
32 < input type ="button" name ="unlink" value ="取消链接" onclick ="tkeditor.document.execCommand('unlink',false,null)" />
33 < input type ="button" name ="fontSize" value ="字体大小" onclick ="tkeditor.document.execCommand('fontSize',false,'5')" />
34 < input type ="button" name ="foreColor" value ="字体颜色" onclick ="tkeditor.document.execCommand('foreColor',false,'#00FFFF')" />
35 < input type ="button" name ="insertImage" value ="图片" onclick ="tkeditor.document.execCommand('insertImage',false,'http://www.baidu.com/img/baidu_sylogo1.gif')" />
36 < br />
37 < iframe id ="tkeditor" style ="width: 500px; height: 200px; border: 1px solid #000000;" ></ iframe >
38 </ body >
39 </html>
下一步想将三个按钮的 onclick 事件分离出来，写成一个函数的形式，但是发现单纯地只在函数中写一行代码不行，希望有知道的朋友留方交流。