在线编辑器原理 -Duqikang's BLOG_网页在线编辑器原理-CSDN博客

本文链接：https://blog.csdn.net/wslhk/article/details/1506563

在线编辑器原理作者:www.xyhhxx.com 文章来源：罗瞳

看了现在网上流行的在线编辑器,也忍不住想了解一下原理.下了目前应用最广泛的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">

<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