经典论坛 › 论坛 › 网站开发区 › 前台制作与脚本专栏 › [突破]HTML在线编辑器任意设置字号大小（请大家检查bug） ...

查看: 40143|回复: 32

[突破]HTML在线编辑器任意设置字号大小（请大家检查bug） [复制链接]

bound0　楼主

老饕

版主 

帖子: 6593
体力: 8785
威望: 287

发表于 2006-7-28 18:15:26 |显示全部楼层

HTML在线编辑器相信大家见得多了，有些流行的在线编辑器具有很丰富的功能。但美中不足的是，现有的HTML在线编辑器设置字号大小通常只限于1-7号字而已，不能更好地满足人们的需要。能不能实现像Word那样任意地设置字号大小呢？经过长时间的攻关，Bound0终于可以肯定地回答这个问题了，呵呵呵！请大家共同分享此“Eureka之喜悦”吧！

我们通常所见的内嵌在网页中的HTML在线编辑器，其核心本质是一个IFRAME

例如：<IFRAME id="Editor" Name="Editor" style="WIDTH: 550; HEIGHT: 480"></IFRAME>

令 Editor.document.designMode="ON";

此时这个IFRAME就是一个设计模式的HTML编辑器了，可以通过脚本

Editor.document.selection.createRange().execCommand(command)

对选中的内容执行command，进行编辑操作。

由于浏览器本身提供的编辑功能非常有限，因此现在流行的HTML在线编辑器大都进行了一些扩展。（在本版精华中收集的PiscesTextEditor就是此类技术的集大成者之一。）

在本文发表之前，HTML在线编辑器在设计模式下的字号（字体大小）任意设定功能尚无成功实现，本文所述技术不仅在此方面实现了零的突破，还对HTML在线编辑器的其他扩展功能的实现作出了广泛的启示。

[前人的误区]

现在流行的HTML在线编辑器的功能可以说已经很丰富了，为什么唯独任意设置字体大小这个看起来并不华丽的功能没有被做出来呢？让我们先来了解一下其中的原因好了：

假设编辑区的HTML内容（Editor.document.body.innerHTML）是

<H1>逍遥主义者的宣言</H1>

<H3>十个小老头
<BR>朱氵太子
</H3>

<P>我们不是败家浪子，我们从不游手好闲；我们不是无用书生，我们从不怨天忧地；我们不是嬉皮士，我们从不玩世不恭；我们不是妄想家，我们从不脱离实际；我们不是阿Q，我们从不麻木颓废；我们不是狂人，我们从不争风吃醋。我们是创造者，我们是改变者，我们是革命者。我们不是在不幸中去幻想幸福的人，我们甚至不是去追求、寻找幸福的人，我们是自己制造幸福的人，我们是快乐的发源者。首先，在我们经历必当经历的经历时，我们不允许自己不快乐！这就是，逍遥主义的真谛。</P>

<P><BIG>将你的梦打开，填进我的希望。谁都不必介怀，一点点的分量。面对别人述说，命运烛转轮回，世间天空海阔，种种因缘寂晦……</BIG></P>

假设选中的是红色的部分，则
Editor.document.selection.createRange().htmlText的内容是

<P>者。我们不是在不幸中去幻想幸福的人，我们甚至不是去追求、寻找幸福的人，我们是自己制造幸福的人，我们是快乐的发源者。首先，在我们经历必当经历的经历时，我们不允许自己不快乐！这就是，逍遥主义的真谛。</P>

<P><BIG>将你的梦打开，填进我</BIG></P>

看见多出来几个蓝色的标签了吧？产生这种现象是因为：“任何时候，document.selection.createRange().htmlText取出来的html代码都是完整成对的，即使当前选中的内容横跨了几个不同的标签”（卖坏梨语），所以IE会自作主张地把不完整的标签补齐。

就是因为这个原因，当选中的内容在Editor.document.body.innerHTML中对应的代码包含不完整的标签时，在Editor.document.selection.createRange()上做pasteHTML可能会吃不进去（有不完整的<table>等时），或者出现明显的BUG。

而现在的HTML在线编辑器所提供的除了基本的Editor.document.selection.createRange().execCommand(command)之外的各种功能几乎都是通过在Editor.document.selection.createRange()上做pasteHTML来实现的。所以字号的自由设定才始终没能实现。

[解决之道]

一切关于“问题的解决之道”的方法论都不外乎是“变通”二字的某种讲法。既然这个功能不适宜用Editor.document.selection.createRange()的pasteHTML()方法来实现，我们就不用它好了。一个变通的想法是：通过改变Editor.document.body.innerHTML的全局来实现。

很显然，至少在理论上，整体改变Editor.document.body.innerHTML可以实现任何我们想要的HTML编辑效果。

多好，随着灵光一闪，战略上的大问题在一秒钟之内就被我们搞定了！接下来让我们看看具体的实现方法吧：

要想通过改变Editor.document.body.innerHTML来给选中的内容设置字号大小，首先要解决的一个问题是在Editor.document.body.innerHTML中对选中内容所对应的代码进行定位。这算不上是个超级复杂的问题，但我知道对这个问题的解答也是很多人梦寐以求的。或许能有很多种解，下面给出我Bound0的办法。

显然这个问题不可以像一些人想象的那样随随便便地用正则或者查找之类的方法就搞定，设想我在
Bound0000000000000000000000000000000000000000000000000000中随便选中了一个0（表示为红色）
，用正则随便查到了一个0，很难确保就是我选中的那个，同样的道理，如果是在雷同的若干段HTML代码中选中了一段，用查找所选字符的方法是不能确保正确定位的。

这个问题的合理的解应该能把Editor.document.body.innerHTML分成三段：partA—选中内容之前的内容所对应的代码、partB—选中内容所对应的代码（就是前面例子中红色的部分）、partC—选中内容之后的内容所对应的代码。（在全选的时候，partA和partC都是空字符串；选中内容为空的时候，从开头到光标位置的内容所对应的代码是partA，partB为空字符串，光标之后的内容所对应的代码是partC）

看看主要的代码：

function first()
{
//首先要取得编辑区的内容
var oSel = Editor.document.selection.createRange();
var conts=''+oSel.htmlText //内容选中部分对应的代码，首尾可能带有多余标签（就是前面例子中的蓝色标签）。
var textLength = Editor.document.body.innerText.length
oSel.moveStart("character", -1*textLength) //把选择区的开始位置往前闪，再取一次内容
var contp=''+oSel.htmlText //选中部分及选中部分前的内容，末尾可能带有多余标签。
var conta=''+Editor.document.body.innerHTML //整个内容
var contpa=''
var partC=""
var partB=""
var partA=""
//接下来通过两组循坏，用上面取得的三个内容互相“磨”，把多余的标签“磨”掉。
var m=0
m=conta.indexOf(contp.substr(0,3)) //校正对齐contp和conta的开始位置，有时候conta开始处可能会有多余的<p>，造成两者对不齐
for(var f=contp.length;f>0;f--)
{if(conta.substr(m,f)==contp.substr(0, f)){contpa=contp.substr(0,f);partC=conta.substr(m+f);break}}
var k=contpa.length
for(var u=conts.length;u>0;u--)
{if(conts.lastIndexOf(contpa.substr(k-u))!=-1){partB=contpa.substr(k-u);partA=contpa.substr(0,k-u);break}}
if(conts.length==0)partA=contpa
//显示按要求分好的A、B、C三段内容。
alert(partA)
alert(partB)
alert(partC)
}

复制代码

实际使用的代码比这个要复杂一些。因为想要应付各种特殊情况、考虑周全也不容易呢。

上面代码所取到的conts和contp常常会包含浏览器自动添加的一些\r\n（回车、换行符），这会造成后面“磨”的困难，有必要先进行格式化。但是由于对于pre、textarea、script、style和xmp这几种标签的内容来说\r\n可能是有意义的，所以不能简单地用.replace(/[\r\n]/g,"")的办法去除。必须既要去除浏览器自动添加的\r\n，又要保全pre、textarea、script和xmp这几种标签的内容。这种局面看起来确实复杂，不过好在浏览器不会在我们要保全的那几种标签的内容里自动添加\r\n，而这个时候原本是罪魁祸首的document.selection.createRange().htmlText的标签自动封闭机制反倒为我们提供了方便：除非选中的内容刚好处于一个标签的内部，否则在conts中将出现完整成对的标签，这样我们就可以比较容易地把位于pre、textarea、script、style和xmp这几种标签中的内容区分出来，只对其他内容进行去除\r\n的操作。而对于选中的内容刚好处于一个标签的内部的这种情况，它的具体情况可能又是五花八门的，我个人采取的办法是把格式化和不格式化都尝试一下，除非格式化的结果令partB长度较长（这说明浏览器自动添加的那些\r\n使“磨”出来的partB长度变短），否则就不格式化。

有时候浏览器自动补全的标签并非添加在选中区域的最外围。例如有时会把</p>结束标签添在</font>标签之前，而这里的</font>标签应该是保留在partB中的，如果把</font>连同</p>一起“磨”掉就不对了。对此采取的办法是检查被“磨”掉的碎渣部分，把碎渣捡起来“磨”好，再装到partB的末尾。

运行演示例

<head>
<script>
var initHTML ="<H1>《Bound0 全能网页客户端》</H1><P><FONT color=#ff0000><STRONG>《Bound0 全能网页客户端》</STRONG></FONT>是一个安装在客户端的可执行程序(EXE)，可以响应网页上的链接和脚本的动作，有很多功能（包括<STRONG>运行本地程序、读写本地文件和注册表</STRONG>等）。<BR><BR>为了防范被滥用或不正当地利用，对《Bound0 全能网页客户端》采用了以下安全措施：<BR><BR><EM>1、《Bound0 全能网页客户端》的安装和注册过程完全在<FONT color=#ff0000><STRONG>用户知情</STRONG></FONT>的条件下进行；<BR>2、每一份售出的《Bound0 全能网页客户端》所具有的实际功能<FONT color=#ff0000><STRONG>根据具体需要设定</STRONG></FONT>，实际不需要的功能不会被开放；<BR>3、《Bound0 全能网页客户端》对网页的响应经过<FONT color=#ff0000><STRONG>特别限制</STRONG></FONT>，不会对<FONT color=#ff0000><STRONG>授权范围</STRONG></FONT>以外的网页做出响应；<BR>4、对每一份售出的《Bound0 全能网页客户端》拷贝均<FONT color=#ff0000><STRONG>留有记录</STRONG></FONT>。<BR></EM><BR>请说明你的具体需要（想要实现什么样的功能），我会做出一个<STRONG><EM>示例网页</EM></STRONG>来让你看，如果觉得<STRONG><EM>确实能够满足需要</EM></STRONG>再购买。</P>"

function start() {
	Editor.document.designMode="ON";
	Editor.document.open();
	Editor.document.write(initHTML);
	Editor.document.close();
}

/*
******************************************************************************************************
conts和contp常常会包含浏览器自动添加的一些\r\n（回车、换行符），这会造成后面“磨”的困难，有必要先进行格式化。但是由于对于pre、textarea、script、style和xmp这几种标签的内容来说\r\n可能是有意义的，所以不能简单地用.replace(/[\r\n]/g,"")的办法去除。必须既要去除浏览器自动添加的\r\n，又要保全pre、textarea、script、style和xmp这几种标签的内容。
******************************************************************************************************
*/
function formatfor(va) {
  var t=va.replace(/\r/g,'');
  t = t.replace(/(<(script|textarea|xmp|pre|style).*?>)([^\r]*?)(<\/\2>)/img,
function (){return arguments[1]+arguments[3].replace(/\n/g, "\r")+arguments[4]})
  t = t.replace(/\n/g, "");
  return t
}

/*
****************************************
Created by Bound0 (bound0@tom.com)

http://bbs.blueidea.com/viewthread.php?tid=2661868

转载或应用时请保留此声明！
****************************************
*/

function first()
{
//首先要取得编辑区的内容

var oSel = Editor.document.selection.createRange();
var conts=oSel.htmlText //内容选中部分对应的代码，首尾可能带有多余标签（就是前面例子中的蓝色标签）。
var textLength = Editor.document.body.innerText.length
oSel.moveStart("character", -1*textLength) //把选择区的开始位置往前闪，再取一次内容
var contp=formatfor(oSel.htmlText) //选中部分及选中部分前的内容，末尾可能带有多余标签。
var conta=formatfor(Editor.document.body.innerHTML) //整个内容

var contpa=''
var partC=""
var partB=""
var partA=""

//接下来用上面取得的三个内容互相“磨”，把多余的标签“磨”掉。

var m=0
m=conta.indexOf(contp.substr(0,3)) //校正对齐contp和conta的开始位置，有时候conta开始处可能会有多余的<p>，造成两者对不齐

var f=contp.length
for(;f>0;f--)
{if(conta.substr(m,f)==contp.substr(0, f)){contpa=contp.substr(0,f);partC=conta.substr(m+f);break}}

var ko=contp.substr(f)
var kol=ko.length
var ty=conta.substr(m+f,kol)
var hu=""
for(var b=1;b<kol;b++)if(ko.substr(b)==ty.substr(0,kol-b)){hu=ko.substr(b);contpa+=hu;partC=partC.substr(kol-b);break}

/*
****************************************************************************************************
有时候浏览器自动补全的标签并非添加在选中区域的最外围。例如有时会把</p>结束标签添在</font>标签之前，而这里的</font>标签应该是保留在partB中的，如果把</font>连同</p>一起“磨”掉就不对了。对此采取的办法是检查被“磨”掉的碎渣部分，把碎渣捡起来“磨”好，再装到partB的末尾。
****************************************************************************************************
*/

var k=contpa.length
cont=conts.replace(/\n/g, "")
var u=cont.length
if(cont==contpa.substr(k-u)){partB=cont;partA=contpa.substr(0,k-u)}else{

for(u=cont.length;u>0;u--)
{if(cont.lastIndexOf(contpa.substr(k-u))!=-1){partB0=contpa.substr(k-u);partA0=contpa.substr(0,k-u);break}}

/*
****************************************************************************************************
对于选中的内容刚好处于一个标签的内部的这种情况，它的具体情况可能又是五花八门的，我个人采取的办法是把格式化和不格式化都尝试一下，除非格式化的结果令partB长度较长（这说明浏览器自动添加的那些\r\n使“磨”出来的partB长度变短），否则就不格式化。
****************************************************************************************************
*/

contt=formatfor(conts)
if(hu!="")if(contt.substr(contt.length-kol)==ko)contt=contt.substr(0,contt.length-kol)+hu
u=contt.length
var youm=contpa.lastIndexOf(contt)
if(youm!=-1){partB=contt;partA=contpa.substr(0,youm);partC=contpa.substr(youm+u)+partC}else{
for(;u>0;u--){if(contt.lastIndexOf(contpa.substr(k-u))!=-1){partB1=contpa.substr(k-u);partA1=contpa.substr(0,k-u);break}}

if(partB1.length>partB0.length){partB=partB1;partA=partA1}else{partB=partB0;partA=partA0}
	}
}
if(partB.substr(partB.length-1)=="<"){partB=partB.substr(0,partB.length-1);partC="<"+partC}
if(partB.substr(partB.length-2)=="</"){partB=partB.substr(0,partB.length-2);partC="</"+partC}

//显示按要求分好的A、B、C三段内容。

alert(partA)
alert(partB)
alert(partC)
}

</script>
</head>
<body SCROLL="no" bgcolor=d0d0c8 onload="start()" leftmargin=5 topmargin=5>
<IFRAME id="Editor" Name="Editor" style="WIDTH: 550; HEIGHT: 480"></IFRAME>
<button onclick=first()>先选择一段文字<br>再点击<font color=red>这个</font>按钮看看</button></body>

提示：您可以先修改部分代码再运行

Tip：留心的朋友可能已经想到了：这段代码还可以用于实现在 “设计/代码” 模式切换过程中，令选中的文字或光标位置保持对应。

成功地实现对内容选中部分的定位之后，接下来要解决的第二个问题是：根据需要改变选中部分的代码。

HTML代码是由标签组成的，我们需要处理的是对字号大小有影响的标签，可分为6种情况：

1、font标签，毋庸置疑，这个标签需要重点处理；

2、h[1-6]、pre、button、listing、big、small、tt、code、kbd、samp等具有字号改变作用的标签

3、浏览器所能识别的大多数标签在带有style="FONT-SIZE: xxx;"样式属性时将可能对字号大小产生影响；

4、select、input、option和object，这四个标签也可以带上FONT-SIZE样式（算是稀奇古怪的用法），但其效果特殊，应将它们从上一条中排除；

5、sup和sub虽然也会影响字号大小，但是它们的这种影响在重新设置字号时应该被保留，所以对这两个标签无需作处理。

6、其他会造成位于自己前面的font标签的字号效力中断的标签，例如<td>、</td>、<caption>、</caption>、<th>、</th>、<tr>、</tr>、<table>、</table>、<thead>、</thead>、<tbody>、</tbody>、<tfoot>、</tfoot>……还可能有哪些一时也想不起来，慢慢完善吧。

处理过程如下（具体代码见演示例）：

0、在做所有的处理之前，先要将textarea、xmp、script和style标签的内容封印起来，以保护它们不被破坏。

1、处理font标签：

（1）尝试将PartB内的所有font标签配对。（Tip：这段代码也可以用来做其他的“语法分析”工作）

（2）将所有在PartB内封闭的标签（能配上对的）中的字号属性去除。

（3）将partB中未结束的<font>标签置标（做上标记）。

（4）将partB中没有配上对的</font>结束标签（开始标签在partA中）置标。

2、处理其他标签：将partB中如前所述的会造成位于自己前面的font标签的字号效力中断的各种HTML标签置标。

3、收尾工作：（怎么？已经结束了吗？）

（1）将上面两步产生的所有置标位置视为“中断点”。

（2）在partB开头和第一个“中断点”之间所夹的内容、最后一个“中断点”和partB末尾之间所夹的内容，以及各个“中断点”之间所夹的内容的前面添上一个行使字号效力的<font ……>，内容的后面添上</font>。

（3）解除textarea、xmp、script和style标签内容的封印。

（4）把partA+partB+partC拼接起来，输出到Editor.document.body.innerHTML。

OK. 一切都搞定了！

完整的运行演示例

<head>
<script>
var edit; //当前选择的文本编辑区域对象
var RangeType; //对象类别

function start() {
	Editor.document.designMode="ON";
	Editor.document.open();
	Editor.document.write(ikj.value);
	Editor.document.close();

fnInit()}

function setFocus() {
   Editor.focus();
}

function selectRange(){
	edit = Editor.document.selection.createRange();
	RangeType = Editor.document.selection.type;
}

function execCommand(command,para) {	
	
		setFocus();
selectRange();	
		  if (para=="")	
edit.execCommand(command)
		  else
		  edit.execCommand(command, false, arguments[1]);
		Editor.focus();
		if (RangeType != "Control") edit.select();
		
}

function doSelectC(str,el) {

var Index = el.selectedIndex;
	 if (Index != 0)
	 {	el.selectedIndex = 0;
	    
		execCommand(str,el.options[Index].text);
			 }
}
function doSelectCl(str,el) {

var Index = el.selectedIndex;
	 if (Index != 0)
	 {	el.selectedIndex = 0;
	   
		execCommand(str,"<"+el.options[Index].value+">");
		
	 }
}

function fnInit(){
      for (i=0; i<document.all.length; i++)
            document.all(i).unselectable = "off";
   	getSystemFonts();
}

function getSystemFonts()
{  
var a=dlgHelper.fonts.count;
var fArray = new Array();
var oOption = document.createElement("OPTION");
oOption.text = "字体";
oOption.value = "0";
selectFontName.add(oOption);
for (i = 1;i < dlgHelper.fonts.count;i++)
	{ 
		fArray[i] = dlgHelper.fonts(i);
		var oOption = document.createElement("OPTION");
		
		oOption.text = fArray[i];
		oOption.Value = i;
		selectFontName.add(oOption);	
	} 
}

////////////////  以下代码才是本文的重点，其他部分的代码只是为了满足运行的需要  /////////////////////

/*
****************************************
Created by Bound0 (bound0@tom.com)

http://bbs.blueidea.com/viewthread.php?tid=2661868

转载或应用时请保留此声明！
****************************************
*/

//格式化，保全script、textarea、xmp、pre和style内容

function formatfor(va) {
  var t=va.replace(/\r/g,'');
  t = t.replace(/(<(script|textarea|xmp|pre|style).*?>)([^\r]*?)(<\/\2>)/img,
function (){return arguments[1]+arguments[3].replace(/\n/g, "\r")+arguments[4]})
  t = t.replace(/\n/g, "");
  return t
}

function fontsize(el)
{var Index=el.selectedIndex
var addpre="<font size="+el.options[Index].value+">"
if(Index>7)addpre="<font style='font-size:"+el.options[Index].value+"pt'>"

var oSel = Editor.document.selection.createRange()
var sBookmark = oSel.getBookmark()
var oSelhtml=oSel.htmlText
if(oSelhtml!="")
{
//定位选中内容

var conts=oSelhtml
var textLength = Editor.document.body.innerText.length
oSel.moveStart("character", -1*textLength)
var contp=formatfor(oSel.htmlText)
var conta=formatfor(Editor.document.body.innerHTML)

var contpa=''
var partC=""
var partB=""
var partA=""

var m=0
m=conta.indexOf(contp.substr(0,3))

var f=contp.length
for(;f>0;f--)
{if(conta.substr(m,f)==contp.substr(0, f)){contpa=contp.substr(0,f);partC=conta.substr(m+f);break}}

var ko=contp.substr(f)
var kol=ko.length
var ty=conta.substr(m+f,kol)
var hu=""
for(var b=1;b<kol;b++)if(ko.substr(b)==ty.substr(0,kol-b)){hu=ko.substr(b);contpa+=hu;partC=partC.substr(kol-b);break}

var k=contpa.length
cont=conts.replace(/\n/g, "")
var u=cont.length
if(cont==contpa.substr(k-u)){partB=cont;partA=contpa.substr(0,k-u)}else{

for(u=cont.length;u>0;u--)
{if(cont.lastIndexOf(contpa.substr(k-u))!=-1){partB0=contpa.substr(k-u);partA0=contpa.substr(0,k-u);break}}

//保护textarea、xmp、script和style的内容不被改变

var cook=[]

partA=partA.replace(/(<(script|textarea|xmp|style).*?>)[\s\S]*?<\/\2>/ig,
function (){co=cook.length
cook[co]=arguments[0];return "<cook"+co+">"})
var ook=""
partA=partA.replace(/(<(script|textarea|xmp|style).*?>)[\s\S]*?$/i,
function (){co=cook.length
ook=arguments[2]
cook[co]=arguments[0];return "<cook"+co+">"})

if(ook!=""){fd="(^[\\s\\S]*?<\/"+ook+">)"
jk=new RegExp(fd,["i"])
if(jk.test(partB)){jk.exec(partB)
co=cook.length
cook[co]=RegExp.$1
partB=partB.replace(jk,"<cook"+co+">")}}
partB=partB.replace(/(<(script|textarea|xmp|style).*?>)[\s\S]*?<\/\2>/ig,
function (){co=cook.length
cook[co]=arguments[0];return "<cook"+co+">"})
ook=""
partB=partB.replace(/(<(script|textarea|xmp|style).*?>)[\s\S]*?$/i,
function (){co=cook.length
ook=arguments[2]
cook[co]=arguments[0];return "<cook"+co+">"})

if(ook!=""){fd="(^[\\s\\S]*?<\/"+ook+">)"
jk=new RegExp(fd,["i"])
if(jk.test(partC)){jk.exec(partC)
co=cook.length
cook[co]=RegExp.$1
partC=partC.replace(jk,"<cook"+co+">")}}
partC=partC.replace(/(<(script|textarea|xmp|style).*?>)[\s\S]*?<\/\2>/ig,
function (){co=cook.length
cook[co]=arguments[0];return "<cook"+co+">"})

//处理<font>

var dol=[]
var dos=[]
var lon=[]

fd="<FONT([^>]*?)>"
jk=new RegExp(fd,["im"])
while(jk.test(partB)){ce=dol.length
jk.exec(partB)
dol[ce]=RegExp.$1
partB=partB.replace(jk,"<site"+ce+">")
}

ce=dol.length-1
for(;ce>-1;ce--)
{kjc="<site"+ce+">"
fd=kjc+'(.*?)<\/font>'
jk=new RegExp(fd,["im"])
if(jk.test(partB)){dos[dos.length]=ce
jk.exec(partB)
ko3=kjc+RegExp.$1+"</site"+ce+">"
partB=partB.replace(jk,ko3)
}else{lon[lon.length]=ce}
}

partB=partB.replace(/<\/font>/img,"<lonf>")

for(var c=dos.length-1;c>-1;c--)
{
uts=dol[dos[c]]
if(""==(uts.replace(/size=[0-7+]+/i,"").replace(/style=("|')FONT-SIZE: [0-9.]+.*;*("|')/im,"").replace(/[\s\n\r]+/mg,""))){partB=partB.replace("<site"+dos[c]+">","")
partB=partB.replace("</site"+dos[c]+">","")}else{partB=partB.replace("<site"+dos[c]+">","<font"+uts.replace(/ size=[0-7+]+/im,"").replace(/FONT-SIZE: [0-9.]+pt/im,"").replace(/ style=("|');*("|')/im,"")+">")
partB=partB.replace("</site"+dos[c]+">","</font>")}
}

//处理其他标签

var addend=""
var mio=[]

partB=partB.replace(/<([^<> ]*?) [^<>]*?style=[^<>]*?FONT-SIZE: [0-9.]+[^<>]*?>/img,
function (){notv="|select|input|option|object|"
if(notv.indexOf("|"+arguments[1].toLowerCase()+"|")==-1){
op=mio.length
mio[op]=arguments[0]
return "<opis"+op+">"}else{return arguments[0]}})

kba=["h1","h2","h3","h4","h5","h6","pre","button","listing","big","small","tt","code","kbd","samp","td","\/td","caption","\/caption","th","\/th","tr","\/tr","table","\/table","thead","\/thead","tbody","\/tbody","tfoot","\/tfoot"]
for(b in kba){
fd="<("+kba[b]+")[^<>]*?>"
jk=new RegExp(fd,["img"])
partB=partB.replace(jk,
function (){op=mio.length
mio[op]=arguments[0]
return "<opis"+op+">"})
}

//收尾工作

liming=[]

partB=partB.replace(/<(opis|site|lonf)([0-9]*)>/g,
function(){var op=liming.length
if(arguments[1]=="opis"){liming[op]=mio[parseInt(arguments[2])]}
if(arguments[1]=="site"){liming[op]="<font"+dol[parseInt(arguments[2])]+">"}
if(arguments[1]=="lonf"){liming[op]="</font>"}
return "<duan"+op+">"
})

if(liming.length>0){
partB=partB.replace(/^(.+?)(<duan0>)/m,function(){if(""!=arguments[1]){return addpre+arguments[1]+"</font>"+arguments[2]}
else{return arguments[0]}})

var op=liming.length-1
for(var kc=0;kc<op;kc++){
fd="(<duan"+kc+">)(.+?)(<duan"+(kc+1)+">)"
jk=new RegExp(fd,["m"])
partB=partB.replace(jk,
function(){if(""!=arguments[2]){return arguments[1]+addpre+arguments[2]+"</font>"+arguments[3]}
else{return arguments[0]}})}

fd="(<duan"+op+">)(.+?)$"
jk=new RegExp(fd,["m"])
partB=partB.replace(jk,function(){if(""!=arguments[2]){return arguments[1]+addpre+arguments[2]+"</font>"}
else{return arguments[0]}})
}
else{partB=addpre+partB+"</font>"
}

partB=partB.replace(/<duan([0-9]+)>/g,function(){return liming[parseInt(arguments[1])]})

var endtemp=partA+partB+partC

for(vof in cook)endtemp=endtemp.replace("<cook"+vof+">",cook[vof])

Editor.document.body.innerHTML=endtemp
var vrvd=Editor.document.selection.createRange()
vrvd.moveToBookmark(sBookmark)
vrvd.select()
}
else{
Editor.document.selection.createRange().pasteHTML(addpre+"</font>")
}Editor.focus()
el.blur()
el.selectedIndex=0}

</script>
</head>
<body SCROLL="no" bgcolor=d0d0c8 onload="start()" leftmargin=5 topmargin=5>

<OBJECT id=dlgHelper CLASSID="clsid:3050f819-98b5-11cf-bb82-00aa00bdce0b" width="0px" height="0px"></OBJECT>
<select id="select1" style="height: 18" onchange="doSelectCl('FormatBlock',this);this.returnValue=false;" name="select1" size="1">  
                    <option selected value="">段落样式</option>
                    <option value="P">普通
                    <option value="H1">标题一
                    <option value="H2">标题二
                    <option value="H3">标题三
                    <option value="H4">标题四
                    <option value="H5">标题五
                    <option value="H6">标题六
<option value="p">段落
<option value="dd">定义
<option value="dt">术语定义
<option value="dir">目录列表
<option value="menu">菜单列表
<option value="PRE">已编排格式
                    </select>
<select style="height: 18" 
                 onchange="doSelectC('FontName',this,'font face=&quot'+this.value+'&quot')" 
                 name="selectFontName"></select></td>
<select style="width: 60; height: 18" onchange="fontsize(this)" name="selectFontSize" size="1">
                    <option selected>字号</option>
                    <option value="7">一号
<option value="6">二号
<option value="5">三号
<option value="4">四号
<option value="3">五号
<option value="2">六号
<option value="1">七号
<option value=1>1 pt
<option value=2>2 pt
<option value=3>3 pt
<option value=4>4 pt
<option value=5>5 pt
<option value=6>6 pt
<option value=7>7 pt
<OPTION value=8>8 pt
<OPTION value=9>9 pt
<OPTION value=10>10 pt
<OPTION value=11>11 pt
<OPTION value=12>12 pt
<OPTION value=13>13 pt
<OPTION value=14>14 pt
<OPTION value=15>15 pt
<OPTION value=16>16 pt
<OPTION value=17>17 pt
<OPTION value=18>18 pt
<OPTION value=19>19 pt
<OPTION value=20>20 pt
<OPTION value=21>21 pt
<OPTION value=22>22 pt
<OPTION value=23>23 pt
<OPTION value=25>25 pt
<OPTION value=28>28 pt
<OPTION value=30>30 pt
<OPTION value=35>35 pt
<OPTION value=40>40 pt
<OPTION value=45>45 pt
<OPTION value=50>50 pt
<OPTION value=60>60 pt
<OPTION value=70>70 pt
<OPTION value=85>85 pt
<OPTION value=100>100 pt
<OPTION value=120>120 pt
<OPTION value=150>150 pt
<option value=200>200 pt
<option value=250>250 pt
<option value=300>300 pt
<option value=500>500 pt
<option value=900>900 pt
<option value=2000>2000 pt</select>
<P>
<IFRAME id="Editor" Name="Editor" style="WIDTH: 100%; HEIGHT: 95%"></IFRAME><textarea name=ikj style="display:none"><P><FONT style="FONT-SIZE: 15pt"><STRONG>Bound0 子确工作室</FONT> 生物信息相关业务简介</STRONG></P><TABLE cellSpacing=0 cellPadding=0 width="100%" border=0><TBODY><TR><TD><H2><FONT color=#ff0000>[多步生物信息查询的一步化]</FONT></H2><P>将繁琐的多步生物信息查询<font style='font-size:13pt'>合并为一步</font>，减少在各个网页间的手工跳转。<P>只要能够理清多步生物信息查询的流程就可能做到一步化。<BR><BR><H2><FONT color=#ff0000>[批量数据转录、整合]</FONT></H2><P>将大量零散的文档收录到数据库中或整理、转化为符合要求的格式。<P>例如：将数百个结构复杂的word文档内容收录到数据库中。</P></TD><TD><CENTER>
<SCRIPT type=text/javascript>

</SCRIPT>
<SCRIPT src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type=text/javascript></SCRIPT>
<SCRIPT type=text/javascript>

</SCRIPT>
<SCRIPT src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type=text/javascript></SCRIPT>
</CENTER></TD></TR></TBODY></TABLE><H2><FONT color=#ff0000>[定制Bound0 Eureka预选器数据库]</FONT></H2><P>利用Bound0 Eureka预选器数据库可以初步判断样品的成分，缩小进一步实验的处理范围，对接下来的实验环节做出调整，或预选出最佳的实验方案，从而缩短研究、开发的周期，节省人力物力。还可以初步验证某些假设推断，并有助于提出新的假设推断，构建新的假说。同时让交流和教学过程变得更简单、方便。<P>有关Bound0 Eureka预选器数据库核心技术的专利申请已被受理，专利申请号：200610077985.3。<P>定制Bound0 Eureka预选器数据库（Bound0 Eureka Preselector）的业务实质：<P>1、定制公共数据库内容的本地化整合。<BR>2、定制数据库查询方式和查询项目。<BR>3、定制分析、统计功能。<BR>4、定制数据共享功能。<BR>5、定制教学展示功能。<BR>6、定制其他辅助功能。<P>例如：Bound0酵母蛋白Eureka预选器数据库的数据内容整合了SGD数据库（Saccharomyces Genome Database，酵母基因组库<A href="http://www.yeastgenome.org/">http://www.yeastgenome.org/</A>）中的部分数据。共包含6713个蛋白的信息。<BR>Bound0酵母蛋白Eureka预选器数据库具有以下基本功能：<BR>（1）Eureka Preselector(主功能): 根据条件给出符合条件的蛋白质列表。根据蛋白质的特征与目标特征的接近程度对列表内的蛋白质进行排名。以网页形式输出、保存 Eureka 结果。对保存的结果进行对比分析。<BR>（2）以树状结构显示（treeview）蛋白质的各种生物学信息。<BR>（3）以搜索引擎形式，对描述蛋白质充当的细胞组分、参与的生物过程、分子功能等描述性特征的标准化术语（GO Term）提供注释和指导。<BR>（4）以搜索引擎形式，对蛋白质的各种ID、名称进行通译。<BR>（5）在安装了Bound0酵母蛋白Eureka预选器数据库的计算机上，实现自定义的eureka:// 协议。可以在用户自己的网页中以超级链接（文字链接、图片热点链接等）的方式动态地调用数据库中的内容进行演示。<BR>（6）自动生成上述演示所需要的链接代码。<BR>（7）独立发行（便于数据共享）的数据分析配件，可对以网页形式保存的 Eureka 结果进行处理。&nbsp;</P><P><TABLE cellSpacing=0 cellPadding=0 width="100%" border=0><TBODY><TR><TD><H2><FONT color=#ff0000>[定制实验人员绩效考核系统]</FONT></H2><P>将团队从落后的纸面管理中解放出来。</P></TD><TD>&nbsp;</TD></TR></TBODY></TABLE></P><P><FONT style="BACKGROUND-COLOR: #ff0000" color=#ffffff><STRONG>以上业务更多详情请质询</STRONG></FONT><A href="mailto:bound0@tom.com"><FONT style="BACKGROUND-COLOR: #ff0000" color=#ffffff><STRONG>bound0@tom.com</STRONG></FONT></A></P></textarea></body>

提示：您可以先修改部分代码再运行

[经验总结]
我先歇歇，明儿再说吧。

[ 本帖最后由 bound0 于 2006-8-25 13:20 编辑 ]

已有 1 人评分	威望	收起理由
hutia	+ 4	精品文章

总评分: 威望 + 4 查看全部评分

[Bound0 专题列表]
Pas besoin de gril : l'enfer, c'est les Autres.

		自动登录	找回密码
密码			注册

[突破]HTML在线编辑器任意设置字号大小（请大家检查bug） [复制链接]

报告一"BUG"

代码我收藏了

浏览过的帖子

浏览过的版块

9周年组织勋章