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 事件分离出来，写成一个函数的形式，但是发现单纯地只在函数中写一行代码不行，希望有知道的朋友留方交流。
