看了现在网上流行的在线编辑器,也忍不住想了解一下原理.下了目前应用最广泛的eWebEdit,这个是我见到的最强的开源在线编辑器...研究了一天，终于知道了核心原理. 先解释一下在线编辑器的原理:首先需要IE5.0以上版本的支持.因为IE5.0以上版本有一个编辑状态,可以在一个iframe里面输入文字.然后通过 "document.body.innerHTML"可以获取iframe里面的html代码.这个就是关键。那怎么才能让ifrmae处于编辑状态呢，可以用 function document.onreadystatechange() { HtmlEdit.document.designMode="On"; } 函数实现. 剩下的问题就是就是取得焦点和选种的值. HtmlEdit.focus(); var sel = HtmlEdit.document.selection.createRange(); 以上2句可以获取选种的植的html代码.到了这里,基本原理搞清楚了，然后我们可以用 insertHTML("str")方法将html字符替换掉选种的值.以下就给出一个简单的demo来演示只有加粗效果的在线编辑器.我这里用了一个textarea来或得iframe里的html值,实际情况，可以将textarea的display设置成false,然后就可以将iframe的内容提交了. demo代码如下: （以下代码已作些许修改，添加了从其他网页中“粘贴”并转成html形式显示出来的功能。杜启康 注！）<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <script language="javascript">
function getIframeData(){ document.form1.test.value=HtmlEdit.document.body.innerHTML; } function sentIframeData(){ HtmlEdit.document.body.innerHTML=document.form1.test.value; } function doB(){ HtmlEdit.focus(); var sel = HtmlEdit.document.selection.createRange(); insertHTML("<i>"+"<b>"+sel.text+"</b>"+"</i>"); } //以下是插入html的子程序function insertHTML(html) { if (HtmlEdit.document.selection.type.toLowerCase() != "none"){ HtmlEdit.document.selection.clear() ; } else { alert("You need to select something before attempting to make it a link.");} HtmlEdit.document.selection.createRange().pasteHTML(html) ; //为HtmlEdit对象创建选中范围，并使用其方法pasteHTML（粘贴html内容）} function document.onreadystatechange() { HtmlEdit.document.designMode="On"; }function document.onpaste()//文档执行“粘贴”的事件{ insertHTML(HtmlEdit.document.selection.createRange().text);//为HtmlEdit对象创建选中范围，并使用用text属性}</script> </head>
<body> <form action="test.asp?act=add" method="post" name="form1"> <IFRAME id=HtmlEdit style="WIDTH: 100%; HEIGHT: 296px" marginWidth=0 marginHeight=0> </IFRAME> <textarea name="test" rows="10" id="test" style="width:100%;"></textarea> <br> <input type="submit" name="Submit" value="提交"> <input type="button" value="iframe->textarea" onClick="getIframeData()"> <input type="button" value="textarea->iframe" onClick="sentIframeData()"> <input type="button" value="B" onClick="doB()"> </form> </body> </html>
一、基础工作
首先当然是收集常见的一些Button图片，比如Cut()，居中()，加粗()等，这不是一件难事，打开FrontPage 2000, 按下Print(屏蔽Copy)键，然后到Photoshop中Paste,将选择区域设置为固定大小(16*16),然后一个一个选择Cut,Ctrl+N(新建),Paste,Save optimizied即可，当然如果您找到直接的Gif文件，就不需要这样做。
只有字体色彩选择图片()和画笔的色彩选择图片()有一点技巧，为了能让用户选择了不同色彩时，相应的字体色彩(或者画笔色彩)的下方能出现相关的色彩，您可以将图片下方一小片区域Delete掉，这样下方即可形成透明色，然后将图片的背景色设置为需要的色彩即可，比如红色的字体色彩为，蓝色的即就为。而在Javascript则可用：图片的ID号.style.backgroundColor=Color 来实现。
另一个技巧便是怎样在Web中形成动态鼠标效果.在Intranet中实现这样的方法非常多，有的采用捕获Mouse方法，有的采用多图片方法等等。在此，笔者则采用动态Css方法来实现，这样不仅简单，而且非常容易编写程序。
我们首先定义一组能产生Up,Dwon和正常效果的样式，如下：（以下的效果是在背景色为d0d0c8上产生的，若您的背景色不是，请修改rgb值即可)
<style>.Up{border-left: 1Px solid rgb(233,244,249);border-right: 1px solid rgb(12,12,12);border-bottom: 1px solid rgb(12,12,12);border-top: 1px solid rgb(233,244,249);cursor:hand;}.Down{border-right: 1Px solid rgb(233,244,249);border-left: 1px solid rgb(12,12,12);border-top: 1px solid rgb(12,12,12);border-bottom: 1px solid rgb(233,244,249);cursor:hand;}.None{border-top: 1Px solid rgb(208,208,200);border-left: 1px solid rgb(208,208,200);border-bottom: 1px solid rgb(208,208,200);border-right: 1px solid rgb(208,208,200);cursor:hand;}</style>
再编写一个小函数，如下：（t表示某个td对象，n表示显示的效果，1=Up ,2=Down;其它表示正常)
function Check(t,n){if(n==1) t.className ="Up"else if(n==2) t.className ="Down" else t.className ="None"}
那么在HTML中加入如下代码：<td class=None οnmοusedοwn=Check(this,2) οnmοuseοver="Check(this,1)" οnmοuseοut="Check(this,0)" οnmοuseup="Check(this,1)"></td> 即可大功告成。
以上所见的是一些基本工作，下面言归正传，真正开始我们的Visual Web HTML Editor之旅。
二、可视Web HTML Editor的实现方法
想在web页面中实现可视WebHTML Editor，是不能使用textarea对象的，因为它只能实现文本的输入。有一个非常好用的东东，那就是Iframe可以帮助我们来完成这功能（什么?IFrame？),是的，没错，就是Iframe.
将以下代码入放一个HTML文件中，然后用IE5.0打开它。
您会发现什么？
选中一些字符，按下Ctrl+B ，Ctrl+I,Ctrl+U ,再按下Ctrl+F，Ctrl+K.....Haha！Editor真正成了一个编辑器，而且是可视的。不要吓着了，您已经实现了您的Visual Web HTML Editor！（没有搞错吧？是的，没有错，您已经实现了您的Visual Web HTML Editor）。
这一切都应该归功于document对象的designModel属性.它表示当前的文档设计模式，黩认为"Off",表示文档不可编辑，但当您将其设置为"On"，即可成为可编辑的，因此您便像在FrontPage中使用它一样。
实现了编辑，我们只是完成了第一步，您还需要知道怎样为字体加色彩、加粗、设置大小，甚至插入图片、去掉格式等一系列功能。因此，我们还需要进一步来学习相关的这些知识。
一旦用户在文档中做了selection,您便可以使用下列的代码来访问它(selection.createRange()方法：从当前选择区中创建一个TextRange对象)。
edit = EditorID.document.selection.createRange();
那么： RangeType = Editor.document.selection.type; 即可表示用户选中的对象类别，如Text,Control等。如果您想在用户选择的区域为设计字体大小，字体色彩等功能，您还需要用到该对象的execCommand(）方法，它表示在给定选择区或上条命令：
因此如果您想加入将用户当前的选择的字体设置为"黑体",那么您需要做的工作如下：
edit = EditorID.document.selection.createRange();edit.execCommande("FontName",false,"黑体");
而加入居中方式则为：
edit = EditorID.document.selection.createRange();edit.execCommande("JustifyCenter"）即可。
但如果您想直接插入HTML代码，则需要用到pasteHTML()方法，比如您想插入一张图片http://www.i0713.net/images/logo/1.gif,则需要如下：
edit = EditorID.document.selection.createRange();edit.pasteHTML("<img src=http://www.i0713.net/images/logo/1.gif>");
当前如果你只想插入一段文字(比如：<img src=http://www.i0713.net/images/logo/1.gif>），则可直接使用text属性，如：
edit = EditorID.document.selection.createRange();edit.text="<img src=http://www.i0713.net/images/logo/1.gif>";
Trackback: http://tb.blog.csdn.net/TrackBack.aspx?PostId=1449456
