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 }

 然后,在<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)"  /> 

这样,一个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>

39 </html>

下一步想将三个按钮的 onclick 事件分离出来,写成一个函数的形式,但是发现单纯地只在函数中写一行代码不行,希望有知道的朋友留方交流。

posted @ 2011-05-30 21:53  zeyoo  阅读(2700)  评论(6编辑  收藏  举报