位置：首页>> 网络编程>> JavaScript>> HTML在线编辑器任意设置字号大小（3）

HTML在线编辑器任意设置字号大小（3）

作者：bound0　来源：蓝色理想　发布时间：2007-08-29 19:55:00　

标签：在线编辑器,字号

成功地实现对内容选中部分的定位之后，接下来要解决的第二个问题是：根据需要改变选中部分的代码。
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><title>HTML在线编辑器任意设置字号大小 - asp之家</title><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.selectedIndexvar 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.htmlTextif(oSelhtml!=""){//定位选中内容var conts=oSelhtmlvar textLength = Editor.document.body.innerText.lengthoSel.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=0m=conta.indexOf(contp.substr(0,3))var f=contp.lengthfor(;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.lengthvar 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.lengthcont=conts.replace(/\n/g, "")var u=cont.lengthif(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}}contt=formatfor(conts)if(hu!="")if(contt.substr(contt.length-kol)==ko)contt=contt.substr(0,contt.length-kol)+huu=contt.lengthvar 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}//保护textarea、xmp、script和style的内容不被改变var cook=[]partA=partA.replace(/(<(script|textarea|xmp|style).*?>)[\s\S]*?<\/\2>/ig,function (){co=cook.lengthcook[co]=arguments[0];return "<cook"+co+">"})var ook=""partA=partA.replace(/(<(script|textarea|xmp|style).*?>)[\s\S]*?$/i,function (){co=cook.lengthook=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.lengthcook[co]=RegExp.$1partB=partB.replace(jk,"<cook"+co+">")}}partB=partB.replace(/(<(script|textarea|xmp|style).*?>)[\s\S]*?<\/\2>/ig,function (){co=cook.lengthcook[co]=arguments[0];return "<cook"+co+">"})ook=""partB=partB.replace(/(<(script|textarea|xmp|style).*?>)[\s\S]*?$/i,function (){co=cook.lengthook=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.lengthcook[co]=RegExp.$1partC=partC.replace(jk,"<cook"+co+">")}}partC=partC.replace(/(<(script|textarea|xmp|style).*?>)[\s\S]*?<\/\2>/ig,function (){co=cook.lengthcook[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.lengthjk.exec(partB)dol[ce]=RegExp.$1partB=partB.replace(jk,"<site"+ce+">")}ce=dol.length-1for(;ce>-1;ce--){kjc="<site"+ce+">"fd=kjc+'(.*?)<\/font>'jk=new RegExp(fd,["im"])if(jk.test(partB)){dos[dos.length]=cejk.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.lengthmio[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.lengthmio[op]=arguments[0]return "<opis"+op+">"})}//收尾工作liming=[]partB=partB.replace(/<(opis|site|lonf)([0-9]*)>/g,function(){var op=liming.lengthif(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-1for(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+partCfor(vof in cook)endtemp=endtemp.replace("<cook"+vof+">",cook[vof])Editor.document.body.innerHTML=endtempvar 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><!--google_ad_client = "pub-2435639364513187";google_ad_width = 200;google_ad_height = 90;google_ad_format = "200x90_0ads_al_s";google_ad_channel ="";google_color_border = "2BA94F";google_color_bg = "80FF00";google_color_link = "002E3F";google_color_text = "000000";google_color_url = "008000";//--></SCRIPT><SCRIPT src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type=text/javascript></SCRIPT><SCRIPT type=text/javascript><!--google_ad_client = "pub-2435639364513187";google_ad_width = 180;google_ad_height = 60;google_ad_format = "180x60_as_rimg";google_cpa_choice = "CAAQyLDUlAIaCPMwSam7wGerKMD29IMB";google_ad_channel = "";//--></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>

[提示：你可先修改部分代码，再按运行]

第一页上一页 1 2

投稿

HTML在线编辑器任意设置字号大小（3）

猜你喜欢