页面中的文字编辑

脚本说明:
第一步：把如下代码加入<body>区域中
<style type="text/css">
SELECT
{
 BACKGROUND:	#eeeeee;
 FONT: 8pt verdana,arial,sans-serif
}
.Gen
{
 POSITION: relative
}
TABLE
{
 POSITION: relative
}
.heading
{
 BACKGROUND:	#eeeeee;
 Color: #000000
}
.Composition
{
 BACKGROUND-COLOR: menu;
 POSITION: relative
}
.yToolbar
{
 BACKGROUND-COLOR: menu;
 BORDER-BOTTOM: buttonshadow	1px solid;
 BORDER-LEFT: buttonhighlight 1px solid;
 BORDER-RIGHT: buttonshadow 1px solid;
 BORDER-TOP:	buttonhighlight	1px solid;
 HEIGHT: 27px;
 LEFT: 0px;
 POSITION: relative;
 TOP: 0px
}
.Btn
{
 BACKGROUND-COLOR: menu;
 BORDER-BOTTOM: buttonface 1px solid;
 BORDER-LEFT: buttonface 1px	solid;
 BORDER-RIGHT: buttonface 1px solid;
 BORDER-TOP:	buttonface 1px solid;
 HEIGHT: 23px;
 POSITION: absolute;
 TOP: 1px;
 WIDTH: 23px
}
.Ico
{
 HEIGHT: 22px;
 LEFT: -1px;
 POSITION: absolute;
 TOP: -1px;
 WIDTH: 22px
}
.TBSep
{
 BORDER-LEFT: buttonshadow 1px solid;
 BORDER-RIGHT: buttonhighlight 1px solid;
 FONT-SIZE: 0px;
 HEIGHT: 22px;
 POSITION: absolute;
 TOP: 1px;
 WIDTH: 1px
}
.TBGen
{
 FONT: 8pt verdana,arial,sans-serif;
 HEIGHT: 22px;
 POSITION: absolute;
 TOP: 2px
}
.TBHandle
{
 BACKGROUND-COLOR: menu;
 BORDER-LEFT: buttonhighlight 1px solid;
 BORDER-RIGHT: buttonshadow 1px solid;
 BORDER-TOP:	buttonhighlight	1px solid;
 FONT-SIZE: 1px;
 HEIGHT: 22px;
 POSITION: absolute;
 TOP: 1px;
 WIDTH: 3px
}
.BtnMouseOverUp
{
 BACKGROUND-COLOR: buttonface;
 BORDER-BOTTOM: buttonshadow	1px solid;
 BORDER-LEFT: buttonhighlight 1px solid;
 BORDER-RIGHT: buttonshadow 1px solid;
 BORDER-TOP:	buttonhighlight	1px solid;
 HEIGHT: 23px;
 POSITION: absolute;
 TOP: 1px;
 WIDTH: 24px
}
.BtnMouseOverDown
{
 BACKGROUND-COLOR: buttonface;
 BORDER-BOTTOM: buttonhighlight 1px solid;
 BORDER-LEFT: buttonshadow 1px solid;
 BORDER-RIGHT: buttonhighlight 1px solid;
 BORDER-TOP:	buttonshadow 1px solid;
 HEIGHT: 23px;
 POSITION: absolute;
 TOP: 1px;
 WIDTH: 24px
}
.BtnDown
{
 BACKGROUND-COLOR: gainsboro;
 BORDER-BOTTOM: buttonhighlight 1px solid;
 BORDER-LEFT: buttonshadow 1px solid;
 BORDER-RIGHT: buttonhighlight 1px solid;
 BORDER-TOP:	buttonshadow 1px solid;
 HEIGHT: 23px;
 POSITION: absolute;
 TOP: 1px;
 WIDTH: 24px
}
.IcoDown
{
 HEIGHT: 23px;
 LEFT: 0px;
 POSITION: absolute;
 TOP: 0px;
 WIDTH: 24px
}
.IcoDownPressed
{
 LEFT: 1px;
 POSITION: absolute;
 TOP: 1px
}
BODY
{
 BORDER-BOTTOM: 0px;
 BORDER-LEFT: 0px;
 BORDER-RIGHT: 0px;
 BORDER-TOP:	0px;
 MARGIN: 3px
}

</STYLE>
<div class="yToolbar" ID="ExtToolbar">
 <div class="TBHandle"></div>

</div>  
  
<div class="yToolbar">  
 <div class="TBHandle"></div>  
 <select ID="FontName"	class="TBGen" TITLE="字体名" LANGUAGE="javascript" onchange="format('fontname',this[this.selectedIndex].value);">  
 <option class="heading">字体
 <option value="宋体">宋体
 <option value="黑体">黑体
 <option value="楷体_GB2312">楷体
 <option value="仿宋_GB2312">仿宋
 <option value="隶书">隶书
 <option value="幼圆">幼圆
  <option value="Arial">Arial
 <option value="Arial Black">Arial Black
 <option value="Arial Narrow">Arial Narrow
 <option value="Bradley Hand	ITC">Bradley Hand ITC
 <option value="Brush Script	MT">Brush Script MT
 <option value="Century Gothic">Century Gothic
 <option value="Comic Sans MS">Comic Sans MS
 <option value="Courier">Courier
 <option value="Courier New">Courier New
 <option value="MS Sans Serif">MS Sans Serif
 <option value="Script">Script
 <option value="System">System
 <option value="Times New Roman">Times New Roman
 <option value="Viner Hand ITC">Viner Hand ITC
 <option value="Verdana">Verdana
 <option value="Wide	Latin">Wide Latin
 <option value="Wingdings">Wingdings
 </select>
 <select ID="FontSize"	class="TBGen" TITLE="字号大小" LANGUAGE="javascript" onchange="format('fontsize',this[this.selectedIndex].value);">  
 <option class="heading">字号
 <option value="7">一号
 <option value="6">二号
 <option value="5">三号
 <option value="4">四号
 <option value="3">五号
 <option value="2">六号
 <option value="1">七号
 </select>

</div>
<div>
<IFRAME	class="Composition" ID="Composition" MARGINHEIGHT="1" MARGINWIDTH="1" width="100%" height="267">
</IFRAME>
</div>
<script	LANGUAGE="Javascript">
SEP_PADDING = 5
HANDLE_PADDING = 7

var yToolbars =	new Array();

var YInitialized = false;

function document.onreadystatechange()
{
 if (YInitialized) return;
 YInitialized = true;

var i, s, curr;

for (i=0; i<document.body.all.length;	i++)
 {
 curr=document.body.all[i];
 if (curr.className == "yToolbar")
 {
 InitTB(curr);
 yToolbars[yToolbars.length] = curr;
 }
 }

DoLayout();
 window.onresize = DoLayout;

Composition.document.open()
 Composition.document.write("<head><style type=\"text/css\">body {font-size: 10.8pt} P{margin-top: 0;margin-bottom: 0}</style><meta http-equiv=Content-Type content=\"text/html; charset=gb2312\"></head><BODY bgcolor=\"#FFFFFF\" MONOSPACE></body>");
 Composition.document.close()
 Composition.document.designMode="On"
// setTimeout("Composition.focus();",0);
}

function InitBtn(btn)
{
 btn.onmouseover = BtnMouseOver;
 btn.onmouseout = BtnMouseOut;
 btn.onmousedown = BtnMouseDown;
 btn.onmouseup	= BtnMouseUp;
 btn.ondragstart = YCancelEvent;
 btn.onselectstart = YCancelEvent;
 btn.onselect = YCancelEvent;
 btn.YUSERONCLICK = btn.onclick;
 btn.onclick =	YCancelEvent;
 btn.YINITIALIZED = true;
 return true;
}

function InitTB(y)
{
 y.TBWidth = 0;

if (!	PopulateTB(y)) return false;

y.style.posWidth = y.TBWidth;

return true;
}

function YCancelEvent()
{
 event.returnValue=false;
 event.cancelBubble=true;
 return false;
}

function BtnMouseOver()
{
 if (event.srcElement.tagName != "IMG") return	false;
 var image = event.srcElement;
 var element =	image.parentElement;

if (image.className == "Ico")	element.className = "BtnMouseOverUp";
 else if (image.className == "IcoDown") element.className = "BtnMouseOverDown";

event.cancelBubble = true;
}

function BtnMouseOut()
{
 if (event.srcElement.tagName != "IMG") {
 event.cancelBubble = true;
 return false;
 }

var image = event.srcElement;
 var element =	image.parentElement;
 yRaisedElement = null;

element.className = "Btn";
 image.className = "Ico";

event.cancelBubble = true;
}

function BtnMouseDown()
{
 if (event.srcElement.tagName != "IMG") {
 event.cancelBubble = true;
 event.returnValue=false;
 return false;
 }

var image = event.srcElement;
 var element =	image.parentElement;

element.className = "BtnMouseOverDown";
 image.className = "IcoDown";

event.cancelBubble = true;
 event.returnValue=false;
 return false;
}

function BtnMouseUp()
{
 if (event.srcElement.tagName != "IMG") {
 event.cancelBubble = true;
 return false;
 }

var image = event.srcElement;
 var element =	image.parentElement;

if (element.YUSERONCLICK) eval(element.YUSERONCLICK +	"anonymous()");

element.className = "BtnMouseOverUp";
 image.className = "Ico";

event.cancelBubble = true;
 return false;
}

function PopulateTB(y)
{
 var i, elements, element;

elements = y.children;
 for (i=0; i<elements.length; i++) {
 element = elements[i];
 if (element.tagName	== "SCRIPT" || element.tagName == "!") continue;

switch (element.className) {
 case "Btn":
 if (element.YINITIALIZED == null)	{
		if (! InitBtn(element))
			return false;
 }

element.style.posLeft = y.TBWidth;
 y.TBWidth	+= element.offsetWidth + 1;
 break;

case "TBGen":
 element.style.posLeft = y.TBWidth;
 y.TBWidth	+= element.offsetWidth + 1;
 break;

case "TBSep":
 element.style.posLeft = y.TBWidth	+ 2;
 y.TBWidth	+= SEP_PADDING;
 break;

case "TBHandle":
 element.style.posLeft = 2;
 y.TBWidth	+= element.offsetWidth + HANDLE_PADDING;
 break;

default:
 return false;
 }
 }

y.TBWidth += 1;
 return true;
}

function DebugObject(obj)
{
 var msg = "";
 for (var i in	TB) {
 ans=prompt(i+"="+TB[i]+"\n");
 if (! ans) break;
 }
}

function LayoutTBs()
{
 NumTBs = yToolbars.length;

if (NumTBs ==	0) return;

var i;
 var ScrWid = (document.body.offsetWidth) - 6;
 var TotalLen = ScrWid;
 for (i = 0 ; i < NumTBs ; i++) {
 TB = yToolbars[i];
 if (TB.TBWidth > TotalLen) TotalLen	= TB.TBWidth;
 }

var PrevTB;
 var LastStart	= 0;
 var RelTop = 0;
 var LastWid, CurrWid;

var TB = yToolbars[0];
 TB.style.posTop = 0;
 TB.style.posLeft = 0;

var Start = TB.TBWidth;
 for (i = 1 ; i < yToolbars.length ; i++) {
 PrevTB = TB;
 TB = yToolbars[i];
 CurrWid = TB.TBWidth;

if ((Start + CurrWid) > ScrWid) {
 Start = 0;
 LastWid =	TotalLen - LastStart;
 }
 else {
 LastWid =	PrevTB.TBWidth;
 RelTop -=	TB.offsetHeight;
 }

TB.style.posTop = RelTop;
 TB.style.posLeft = Start;
 PrevTB.style.width = LastWid;

LastStart =	Start;
 Start += CurrWid;
 }

TB.style.width = TotalLen - LastStart;

i--;
 TB = yToolbars[i];
 var TBInd = TB.sourceIndex;
 var A	= TB.document.all;
 var item;
 for (i in A) {
 item = A.item(i);
 if (! item)	continue;
 if (! item.style) continue;
 if (item.sourceIndex <= TBInd) continue;
 if (item.style.position == "absolute") continue;
 item.style.posTop =	RelTop;
 }
}

function DoLayout()
{
 LayoutTBs();
}

function validateMode()
{
 if (!	bTextMode) return true;
 alert("请取消“使用 HTML 语法书写”选项再使用系统编辑功能!");
 Composition.focus();
 return false;
}

function format1(what,opt)
{
 if (opt=="removeFormat")
 {
 what=opt;
 opt=null;
 }

if (opt==null) Composition.document.execCommand(what);
 else Composition.document.execCommand(what,"",opt);

pureText = false;
 Composition.focus();
}

function format(what,opt)
{
 if (!validateMode()) return;

format1(what,opt);
}

function setMode(newMode)
{
 bTextMode = newMode;
 var cont;
 if (bTextMode) {
 cleanHtml();
 cleanHtml();

cont=Composition.document.body.innerHTML;
 Composition.document.body.innerText=cont;
 } else {
 cont=Composition.document.body.innerText;
 Composition.document.body.innerHTML=cont;
 }

Composition.focus();
}

function getEl(sTag,start)
{
 while	((start!=null) && (start.tagName!=sTag)) start = start.parentElement;
 return start;
}

function UserDialog(what)
{
 if (!validateMode()) return;

Composition.document.execCommand(what, true);

pureText = false;
 Composition.focus();
}

function foreColor()
{
 if (!	validateMode())	return;
 var arr = showModalDialog("color.htm", "", "dialogWidth:18.5em; dialogHeight:17.5em; status:0");
 if (arr != null) format('forecolor', arr);
 else Composition.focus();
}

function cleanHtml()
{
 var fonts = Composition.document.body.all.tags("FONT");
 var curr;
 for (var i = fonts.length - 1; i >= 0; i--) {
 curr = fonts[i];
 if (curr.style.backgroundColor == "#ffffff") curr.outerHTML	= curr.innerHTML;
 }
}

var bLoad=false
var pureText=true
var bodyTag="<head><style type=\"text/css\">body {font-size:10.8pt} P {margin-top: 0;margin-bottom: 0}</style><meta http-equiv=Content-Type content=\"text/html; charset=gb2312\"></head><BODY bgcolor=\"#FFFFFF\" MONOSPACE>"
var bTextMode=false

public_description=new Editor

function Editor()
{
 this.put_HtmlMode=setMode;
 this.put_value=putText;
 this.get_value=getText;
}

function getText()
{
	if (bTextMode)
		return Composition.document.body.innerText;
	else
	{
		cleanHtml();
		cleanHtml();
		return Composition.document.body.innerHTML;
	}
}

function putText(v)
{
	if (bTextMode)
		Composition.document.body.innerText = v;
	else
		Composition.document.body.innerHTML = v;
}

function InitDocument()
{
	Composition.document.open();
	Composition.document.write(bodyTag);
	Composition.document.close();
//	Composition.focus();
//	setTimeout("Composition.focus()",0);

bLoad=true;
}

</script>

第二步：把<body>中的内容改为：
<body  onload="InitDocument();" STYLE="margin:0pt;padding:0pt">