在textarea中怎么才能编辑字体的大小,字号,颜色等? <textarea style="font-size:20pt; color:#0000ff">content of textarea</textarea> 解决方案 » 免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货 不.是那种自由编辑,就好比把frontpage软件的一些功能做成网页的形式. http://www.csdn.net/expert/topic/120/120629.shtm lb5000中non-cgi/edotor目录(www.17do.com)两个文件edit.html<html><head><title>LB5000 HTML编辑器</title><link rel="STYLESHEET" type="text/css" href="edit.css"><meta http-equiv="Content-Type" content="text/html; charset=gb2312"></head><body bgcolor="menu" onload="InitDocument();" STYLE="margin:0pt;padding:0pt"><div class="yToolbar" ID="ExtToolbar"><div class="TBHandle"></div> <div class="Btn" TITLE="删除" LANGUAGE="javascript" onclick="format1('delete');"> <img class="Ico" src="images\delete.gif" WIDTH="16" HEIGHT="16"> </div> <div class="Btn" TITLE="剪切" LANGUAGE="javascript" onclick="format1('cut');"> <img class="Ico" src="images\cut.gif" WIDTH="16" HEIGHT="16"> </div> <div class="Btn" TITLE="复制" LANGUAGE="javascript" onclick="format1('copy');"> <img class="Ico" src="images\copy.gif" WIDTH="16" HEIGHT="16"> </div> <div class="Btn" TITLE="粘贴" LANGUAGE="javascript" onclick="format1('paste');"> <img class="Ico" src="images\paste.gif" WIDTH="16" HEIGHT="16"> </div> <div class="Btn" TITLE="撤消" LANGUAGE="javascript" onclick="format1('undo');"> <img class="Ico" src="images\undo.gif" WIDTH="17" HEIGHT="16"> </div> <div class="Btn" TITLE="恢复" LANGUAGE="javascript" onclick="format1('redo');"> <img class="Ico" src="images\redo.gif" WIDTH="16" HEIGHT="16"> </div> <div class="TBSep"></div> <div class="Btn" TITLE="插入表格" LANGUAGE="javascript" onclick="fortable()"> <img class="Ico" src="images\table.gif" WIDTH="18" HEIGHT="18"> </div> <div class="Btn" TITLE="插入超级连接" LANGUAGE="javascript" onclick="UserDialog('CreateLink')"> <img class="Ico" src="images\wlink.gif" WIDTH="22" HEIGHT="22"></div><div class="Btn" TITLE="插入图片" LANGUAGE="javascript" onclick="UserDialog('InsertImage');"> <img class="Ico" src="images\img.gif" WIDTH="22" HEIGHT="22"> </div><div class="Btn" TITLE="插入水平线" LANGUAGE="javascript" onclick="format('InsertHorizontalRule')"> <img class="Ico" src="images/hr.gif" WIDTH="16" HEIGHT="16"></div><div class="TBSep"></div><div class="Btn" TITLE="提交" LANGUAGE="javascript" onclick="handin()"> <img class="Ico" src="images/save.gif" WIDTH="16" HEIGHT="16"></div> <div class="TBSep"></div><div TITLE="欢迎使用LB5000 HTML代码编辑器" > <font size=2px> < =HTML代码编辑完毕,请按提交 </font></div> </div><div class="yToolbar"> <div class="TBHandle"></div><select ID="formatSelect" class="TBGen" title="段落格式" onchange="doSelectClick('FormatBlock',this)" style="font: icon; width: 80px;"> <option>段落格式</option> <option VALUE="<P>">普通 <option VALUE="<PRE>">已编排格式 <option VALUE="<H1>">标题一 <option VALUE="<H2>">标题二 <option VALUE="<H3>">标题三 <option VALUE="<H4>">标题四 <option VALUE="<H5>">标题五 <option VALUE="<H6>">标题六 <option VALUE="<H7>">标题七 </select><select id="specialtype" class="TBGen" onchange="doSelectClick('FormatBlock',this)" style="font: icon; width: 100px;"> <option>特殊字体格式</option> <option VALUE="SUP">上标 <option VALUE="SUB">下标 <option VALUE="DEL">删除线 <option VALUE="BLINK">闪烁 <option VALUE="BIG">增大字体 <option VALUE="SMALL">减小字体 </select> <div class="Btn" TITLE="字体颜色" LANGUAGE="javascript" onclick="foreColor();"> <img class="Ico" src="images\fgcolor.gif" WIDTH="23" HEIGHT="22"> </div> <div class="TBSep"></div> <div class="Btn" TITLE="加粗" LANGUAGE="javascript" onclick="format('bold');"> <img class="Ico" src="images\bold.gif" WIDTH="16" HEIGHT="16"> </div> <div class="Btn" TITLE="斜体" LANGUAGE="javascript" onclick="format('italic');"> <img class="Ico" src="images\italic.gif" WIDTH="16" HEIGHT="16"> </div> <div class="Btn" TITLE="下划线" LANGUAGE="javascript" onclick="format('underline');"> <img class="Ico" src="images\underline.gif" WIDTH="16" HEIGHT="16"> </div> <div class="TBSep"></div> <div class="Btn" TITLE="左对齐" NAME="Justify" LANGUAGE="javascript" onclick="format('justifyleft');"> <img class="Ico" src="images\aleft.gif" WIDTH="17" HEIGHT="16"> </div> <div class="Btn" TITLE="居中" NAME="Justify" LANGUAGE="javascript" onclick="format('justifycenter');"> <img class="Ico" src="images\center.gif" WIDTH="17" HEIGHT="16"> </div> <div class="Btn" TITLE="右对齐" NAME="Justify" LANGUAGE="javascript" onclick="format('justifyright');"> <img class="Ico" src="images\aright.gif" WIDTH="16" HEIGHT="16"> </div> <div class="TBSep"></div> <div class="Btn" TITLE="编号" LANGUAGE="javascript" onclick="format('insertorderedlist');"> <img class="Ico" src="images\numlist.gif" WIDTH="18" HEIGHT="18"> </div> <div class="Btn" TITLE="项目符号" LANGUAGE="javascript" onclick="format('insertunorderedlist');"> <img class="Ico" src="images\bullist.gif" WIDTH="18" HEIGHT="18"> </div> <div class="Btn" TITLE="减少缩进量" LANGUAGE="javascript" onclick="format('outdent');"> <img class="Ico" src="images\outdent.gif" WIDTH="16" HEIGHT="16"> </div> <div class="Btn" TITLE="增加缩进量" LANGUAGE="javascript" onclick="format('indent');"> <img class="Ico" src="images\indent.gif" WIDTH="16" HEIGHT="16"> </div> <div class="TBSep"></div> <div class="Btn" TITLE="使用帮助" LANGUAGE="javascript" onclick="help();"> <img class="Ico" src="images\help.gif" WIDTH="16" HEIGHT="16"> </div> <div class="TBSep"></div> </div><div class="yToolbar"> <div class="TBHandle"></div><div class="TBHandle"></div><select language="javascript" class="TBGen" id="FontName" title="字体名" onchange="format('fontname',this[this.selectedIndex].value);"> <option class="heading" selected>字体<option value="宋体">宋体<option value="黑体">黑体<option value="楷体_GB2312">楷体<option value="仿宋_GB2312">仿宋<option value="隶书">隶书<option value="幼圆">幼圆<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</option></select> <select language="javascript" class="TBGen" id="FontSize" title="字号大小" onchange="format('fontsize',this[this.selectedIndex].value);"> <option class="heading" selected>字号<option value="7">一号<option value="6">二号<option value="5">三号<option value="4">四号<option value="3">五号<option value="2">六号<option value="1">七号</option></select> <div class="TBSep"></div><div class="TBGen" id="EditMode" title="使用 HTML"><input onclick="setMode(this.checked);" type="checkbox">使用 HTML 语法书写 </div></div> <div class="TBSep"></div> </div><iframe class="Composition" ID="Composition" MARGINHEIGHT="1" MARGINWIDTH="1" width="100%" height="212"></iframe><script src="edit.js" type="text/javascript"></script></body></html>edit.jsSEP_PADDING = 5HANDLE_PADDING = 7var 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}</style><meta http-equiv=Content-Type content=\"text/html; charset=gb2312\"></head><BODY bgcolor=\"#FFFFFF\" MONOSPACE></body>"); Composition.document.close() Composition.document.designMode="On"}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("selcolor.html", "", "dialogWidth:18.5em; dialogHeight:17.5em; status:0"); if (arr != null) format('forecolor', arr); else Composition.focus();}function fortable(){ if (! validateMode()) return; var arr = showModalDialog("table.html", "", "dialogWidth:13.5em; dialogHeight:10.5em; status:0"); if (arr != null){ var ss; ss=arr.split("*") row=ss[0]; col=ss[1]; var string; string="<table border=1>"; for(i=1;i<=row;i++){ string=string+"<tr>"; for(j=1;j<=col;j++){ string=string+"<td></td>"; } string=string+"</tr>"; } string=string+"</table>"; content=Composition.document.body.innerHTML; content=content+string; Composition.document.body.innerHTML=content; } 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; }}function getPureHtml(){ var str = ""; var paras = Composition.document.body.all.tags("P"); if (paras.length > 0) { for (var i=paras.length-1; i >= 0; i--) str = paras[i].innerHTML + "\n" + str; } else { str = Composition.document.body.innerHTML; } return str;}var bLoad=falsevar pureText=truevar bodyTag="<head><style type=\"text/css\">body {font-size: 10.8pt}</style><meta http-equiv=Content-Type content=\"text/html; charset=gb2312\"></head><BODY bgcolor=\"#FFFFFF\" MONOSPACE>"var bTextMode=falsepublic_description=new Editorfunction 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(); bLoad=true;}function doSelectClick(str, el) { var Index = el.selectedIndex; if (Index != 0){ el.selectedIndex = 0; if (el.id == "specialtype") specialtype(el.options[Index].value); else format(str,el.options[Index].value); }}var bIsIE5 = navigator.userAgent.indexOf("IE 5") > -1;var edit;var RangeType;function specialtype(Mark){ var strHTML; if (bIsIE5) selectRange(); if (RangeType == "Text"){ strHTML = "<" + Mark + ">" + edit.text + "</" + Mark + ">"; edit.pasteHTML(strHTML); Composition.focus(); edit.select(); } }function selectRange(){ edit = Composition.document.selection.createRange(); RangeType = Composition.document.selection.type;}function handin(){ var strHTMLbegin; var strHTMLend; strHTMLbegin = "[HTML]"; strHTMLend = "[/HTML]"; self.opener.FORM.inpost.value+=strHTMLbegin + Composition.document.body.innerHTML + strHTMLend; self.close();}function help(){ var helpmess; helpmess="---------------填写帮助---------------\r\n\r\n"+ "1.请不要发表有危险性的脚本。\r\n\r\n"+ "2.如果要书写源代码,请选中用\r\n\r\n"+ " HTML语法书写.\r\n\r\n"+ "3.需要你自己运行,才能看效果.\r\n\r\n"+ "4.如果书写js,尽量不要在这儿书写.\r\n\r\n"; alert(helpmess);} 首先,textarea不能实现那种自由编辑,就好比把frontpage软件的一些功能做成网页的形式. 要实现的话得用iframe,将其document.designMode="On",就可以在其中输入文字了。然后就是在父窗口得到其中文字,对其作出处理,比如两边加上<b>,<font color=...>等等,再把文字写回去。比较COOL的效果可以看看http://go3.163.com/~fsl/ring/helpmaker_10415.zip net_lover(孟子E章)你的那个代码我试了,但是有两个问题:1.怎样改变textarea的大小.2.我用asp程序request.from("rMode")提取在textarea中输入的内容,但存入数据库后都为on这个字符串。请问怎样才能输入我在textarea中输入的内容。 document.write("<IFRAME NAME=EditCtrl WIDTH=200 height=100></IFRAME>")改变大小!!至于取内容,可以参考本站发表文档的页面! net_lover(孟子E章)想请教一个问题:把这句改为document.write("<textarea name=EditCtrl rows="10" cols="60"></textarea>")已经能提取内容并存储了,但textarea的大小又固定了,rows和cols根本不起作用,请问怎样才能改变textarea的大小. 改为textarea之后又不能编辑了,怎样才能调整textarea的高和宽并能进行编辑? var rows1,cols1;document.write("<textarea name=EditCtrl rows="+rows1+" cols="+cols1+"></textarea>") 颜色不好改变:<FORM NAME="formName"><INPUT TYPE="checkbox" ONCLICK="if (this.checked){ this.form.aField.style.fontSize = '16pt'; this.form.aField.style.fontWeight = 'bold'; this.form.aField.style.backgroundColor = '#ff0000'; this.form.aField.style.fontFamily = '黑体';} else this.form.aField.style.fontWeight = 'normal';">点击测试<br><textarea NAME="aField" VALUE="测试">测试文字</textarea></FORM> 颜色也是可以改变的:<FORM NAME="formName"><INPUT TYPE="checkbox" ONCLICK="if (this.checked){ this.form.aField.style.fontSize = '16pt'; this.form.aField.style.fontWeight = 'bold'; this.form.aField.style.color = '#ff0000'; this.form.aField.style.fontFamily = '黑体';} else this.form.aField.style.fontWeight = 'normal';">点击测试<br><textarea NAME="aField" VALUE="测试">测试文字</textarea></FORM> to:net_lover(孟子E章) 上面的代码是你的原著么? 完美的例子:<FORM NAME="formName"><INPUT TYPE="checkbox" ONCLICK="if (this.checked){ this.form.aField.style.fontSize = '16pt'; this.form.aField.style.fontWeight = 'normal'; this.form.aField.style.color = '#ff0000'; this.form.aField.style.fontFamily = '黑体'; this.form.aField.style.backgroundColor = '#ccffcc'; this.form.aField.style.fontFamily = '黑体'; this.form.aField.style.textDecoration = 'none line-through'; this.form.aField.style.fontStyle = 'normal'; this.form.aField.style.textAlign = 'left'; } else {this.form.aField.style.fontWeight = 'bold'; this.form.aField.style.fontSize = '48pt'; this.form.aField.style.textDecoration = 'underline'; this.form.aField.style.color = '#0099ff'; this.form.aField.style.fontFamily = '楷体_GB2312'; this.form.aField.style.backgroundColor = '#FFccFF'; this.form.aField.style.fontStyle = 'italic'; this.form.aField.style.textAlign = 'center'; }">点击测试<br><textarea NAME="aField" VALUE="测试">测试文字</textarea></FORM> to:net_lover(孟子E章) 这些代码我好像在那个网站上看过,www.oztime.net,厉害厉害!!原来是你写的 【EXT-UploadDialog相关】求UploadDialog的各种参数解释 jsp中留言板页面跳转问题 document不能访问form里的控件 Prototype内的正则表达式..... 怎么让选择一个 失效(disabled)一个 正则表达式,整段文章匹配 求助 怎样激活父窗口的父窗口的控件的事件?? 大虾请进。。。。有分贡上!!! 很着急啊,我在面试,这个搞定了就通过了,在线等待! 帮我看看这个location该怎样写呀?我要跳转的页面是xxdf_report.php 请问如何打开一个子窗口,然后按下子窗口中的一个按钮传递一个值到父窗口去 用javascript实现标签功能?
两个文件
edit.html<html>
<head>
<title>LB5000 HTML编辑器</title>
<link rel="STYLESHEET" type="text/css" href="edit.css">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head><body bgcolor="menu" onload="InitDocument();" STYLE="margin:0pt;padding:0pt"><div class="yToolbar" ID="ExtToolbar">
<div class="TBHandle"></div>
<div class="Btn" TITLE="删除" LANGUAGE="javascript" onclick="format1('delete');">
<img class="Ico" src="images\delete.gif" WIDTH="16" HEIGHT="16">
</div>
<div class="Btn" TITLE="剪切" LANGUAGE="javascript" onclick="format1('cut');">
<img class="Ico" src="images\cut.gif" WIDTH="16" HEIGHT="16">
</div>
<div class="Btn" TITLE="复制" LANGUAGE="javascript" onclick="format1('copy');">
<img class="Ico" src="images\copy.gif" WIDTH="16" HEIGHT="16">
</div>
<div class="Btn" TITLE="粘贴" LANGUAGE="javascript" onclick="format1('paste');">
<img class="Ico" src="images\paste.gif" WIDTH="16" HEIGHT="16">
</div>
<div class="Btn" TITLE="撤消" LANGUAGE="javascript" onclick="format1('undo');">
<img class="Ico" src="images\undo.gif" WIDTH="17" HEIGHT="16">
</div>
<div class="Btn" TITLE="恢复" LANGUAGE="javascript" onclick="format1('redo');">
<img class="Ico" src="images\redo.gif" WIDTH="16" HEIGHT="16">
</div> <div class="TBSep"></div>
<div class="Btn" TITLE="插入表格" LANGUAGE="javascript" onclick="fortable()">
<img class="Ico" src="images\table.gif" WIDTH="18" HEIGHT="18">
</div>
<div class="Btn" TITLE="插入超级连接" LANGUAGE="javascript" onclick="UserDialog('CreateLink')">
<img class="Ico" src="images\wlink.gif" WIDTH="22" HEIGHT="22">
</div>
<div class="Btn" TITLE="插入图片" LANGUAGE="javascript" onclick="UserDialog('InsertImage');">
<img class="Ico" src="images\img.gif" WIDTH="22" HEIGHT="22">
</div>
<div class="Btn" TITLE="插入水平线" LANGUAGE="javascript" onclick="format('InsertHorizontalRule')">
<img class="Ico" src="images/hr.gif" WIDTH="16" HEIGHT="16">
</div><div class="TBSep"></div>
<div class="Btn" TITLE="提交" LANGUAGE="javascript" onclick="handin()">
<img class="Ico" src="images/save.gif" WIDTH="16" HEIGHT="16">
</div> <div class="TBSep"></div><div TITLE="欢迎使用LB5000 HTML代码编辑器" >
<font size=2px>
< =HTML代码编辑完毕,请按提交
</font>
</div>
</div><div class="yToolbar">
<div class="TBHandle"></div>
<select ID="formatSelect" class="TBGen" title="段落格式" onchange="doSelectClick('FormatBlock',this)" style="font: icon; width: 80px;">
<option>段落格式</option>
<option VALUE="<P>">普通
<option VALUE="<PRE>">已编排格式
<option VALUE="<H1>">标题一
<option VALUE="<H2>">标题二
<option VALUE="<H3>">标题三
<option VALUE="<H4>">标题四
<option VALUE="<H5>">标题五
<option VALUE="<H6>">标题六
<option VALUE="<H7>">标题七
</select>
<select id="specialtype" class="TBGen" onchange="doSelectClick('FormatBlock',this)" style="font: icon; width: 100px;">
<option>特殊字体格式</option>
<option VALUE="SUP">上标
<option VALUE="SUB">下标
<option VALUE="DEL">删除线
<option VALUE="BLINK">闪烁
<option VALUE="BIG">增大字体
<option VALUE="SMALL">减小字体
</select>
<div class="Btn" TITLE="字体颜色" LANGUAGE="javascript" onclick="foreColor();">
<img class="Ico" src="images\fgcolor.gif" WIDTH="23" HEIGHT="22">
</div>
<div class="TBSep"></div> <div class="Btn" TITLE="加粗" LANGUAGE="javascript" onclick="format('bold');">
<img class="Ico" src="images\bold.gif" WIDTH="16" HEIGHT="16">
</div>
<div class="Btn" TITLE="斜体" LANGUAGE="javascript" onclick="format('italic');">
<img class="Ico" src="images\italic.gif" WIDTH="16" HEIGHT="16">
</div>
<div class="Btn" TITLE="下划线" LANGUAGE="javascript" onclick="format('underline');">
<img class="Ico" src="images\underline.gif" WIDTH="16" HEIGHT="16">
</div> <div class="TBSep"></div> <div class="Btn" TITLE="左对齐" NAME="Justify" LANGUAGE="javascript" onclick="format('justifyleft');">
<img class="Ico" src="images\aleft.gif" WIDTH="17" HEIGHT="16">
</div>
<div class="Btn" TITLE="居中" NAME="Justify" LANGUAGE="javascript" onclick="format('justifycenter');">
<img class="Ico" src="images\center.gif" WIDTH="17" HEIGHT="16">
</div>
<div class="Btn" TITLE="右对齐" NAME="Justify" LANGUAGE="javascript" onclick="format('justifyright');">
<img class="Ico" src="images\aright.gif" WIDTH="16" HEIGHT="16">
</div> <div class="TBSep"></div> <div class="Btn" TITLE="编号" LANGUAGE="javascript" onclick="format('insertorderedlist');">
<img class="Ico" src="images\numlist.gif" WIDTH="18" HEIGHT="18">
</div>
<div class="Btn" TITLE="项目符号" LANGUAGE="javascript" onclick="format('insertunorderedlist');">
<img class="Ico" src="images\bullist.gif" WIDTH="18" HEIGHT="18">
</div>
<div class="Btn" TITLE="减少缩进量" LANGUAGE="javascript" onclick="format('outdent');">
<img class="Ico" src="images\outdent.gif" WIDTH="16" HEIGHT="16">
</div>
<div class="Btn" TITLE="增加缩进量" LANGUAGE="javascript" onclick="format('indent');">
<img class="Ico" src="images\indent.gif" WIDTH="16" HEIGHT="16">
</div>
<div class="TBSep"></div>
<div class="Btn" TITLE="使用帮助" LANGUAGE="javascript" onclick="help();">
<img class="Ico" src="images\help.gif" WIDTH="16" HEIGHT="16">
</div>
<div class="TBSep"></div>
</div><div class="yToolbar">
<div class="TBHandle"></div>
<div class="TBHandle"></div><select language="javascript" class="TBGen" id="FontName" title="字体名" onchange="format('fontname',this[this.selectedIndex].value);">
<option class="heading" selected>字体<option value="宋体">宋体<option value="黑体">黑体<option value="楷体_GB2312">楷体<option value="仿宋_GB2312">仿宋<option value="隶书">隶书<option value="幼圆">幼圆<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</option></select> <select language="javascript" class="TBGen" id="FontSize" title="字号大小" onchange="format('fontsize',this[this.selectedIndex].value);"> <option class="heading" selected>字号<option value="7">一号<option value="6">二号<option value="5">三号<option value="4">四号<option value="3">五号<option value="2">六号<option value="1">七号</option></select>
<div class="TBSep"></div>
<div class="TBGen" id="EditMode" title="使用 HTML"><input onclick="setMode(this.checked);" type="checkbox">使用 HTML 语法书写 </div></div> <div class="TBSep"></div>
</div>
<iframe class="Composition" ID="Composition" MARGINHEIGHT="1" MARGINWIDTH="1" width="100%" height="212">
</iframe><script src="edit.js" type="text/javascript"></script></body>
</html>
edit.js
SEP_PADDING = 5
HANDLE_PADDING = 7var 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}</style><meta http-equiv=Content-Type content=\"text/html; charset=gb2312\"></head><BODY bgcolor=\"#FFFFFF\" MONOSPACE></body>");
Composition.document.close()
Composition.document.designMode="On"
}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("selcolor.html", "", "dialogWidth:18.5em; dialogHeight:17.5em; status:0");
if (arr != null) format('forecolor', arr);
else Composition.focus();
}function fortable()
{
if (! validateMode()) return;
var arr = showModalDialog("table.html", "", "dialogWidth:13.5em; dialogHeight:10.5em; status:0");
if (arr != null){
var ss;
ss=arr.split("*")
row=ss[0];
col=ss[1];
var string;
string="<table border=1>";
for(i=1;i<=row;i++){
string=string+"<tr>";
for(j=1;j<=col;j++){
string=string+"<td></td>";
}
string=string+"</tr>";
}
string=string+"</table>";
content=Composition.document.body.innerHTML;
content=content+string;
Composition.document.body.innerHTML=content;
}
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;
}
}function getPureHtml()
{
var str = "";
var paras = Composition.document.body.all.tags("P");
if (paras.length > 0) {
for (var i=paras.length-1; i >= 0; i--) str = paras[i].innerHTML + "\n" + str;
} else {
str = Composition.document.body.innerHTML;
}
return str;
}var bLoad=false
var pureText=true
var bodyTag="<head><style type=\"text/css\">body {font-size: 10.8pt}</style><meta http-equiv=Content-Type content=\"text/html; charset=gb2312\"></head><BODY bgcolor=\"#FFFFFF\" MONOSPACE>"
var bTextMode=falsepublic_description=new Editorfunction 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();
bLoad=true;
}function doSelectClick(str, el) {
var Index = el.selectedIndex;
if (Index != 0){
el.selectedIndex = 0;
if (el.id == "specialtype")
specialtype(el.options[Index].value);
else
format(str,el.options[Index].value);
}
}
var bIsIE5 = navigator.userAgent.indexOf("IE 5") > -1;
var edit;
var RangeType;function specialtype(Mark){
var strHTML;
if (bIsIE5) selectRange();
if (RangeType == "Text"){
strHTML = "<" + Mark + ">" + edit.text + "</" + Mark + ">";
edit.pasteHTML(strHTML);
Composition.focus();
edit.select();
}
}function selectRange(){
edit = Composition.document.selection.createRange();
RangeType = Composition.document.selection.type;
}function handin()
{
var strHTMLbegin;
var strHTMLend;
strHTMLbegin = "[HTML]";
strHTMLend = "[/HTML]";
self.opener.FORM.inpost.value+=strHTMLbegin + Composition.document.body.innerHTML + strHTMLend;
self.close();
}function help()
{
var helpmess;
helpmess="---------------填写帮助---------------\r\n\r\n"+
"1.请不要发表有危险性的脚本。\r\n\r\n"+
"2.如果要书写源代码,请选中用\r\n\r\n"+
" HTML语法书写.\r\n\r\n"+
"3.需要你自己运行,才能看效果.\r\n\r\n"+
"4.如果书写js,尽量不要在这儿书写.\r\n\r\n";
alert(helpmess);}
1.怎样改变textarea的大小.
2.我用asp程序request.from("rMode")提取在textarea中输入的内容,但存入数据库后都为on这个字符串。请问怎样才能输入我在textarea中输入的内容。
改变大小!!
至于取内容,可以参考本站发表文档的页面!
把这句改为document.write("<textarea name=EditCtrl rows="10" cols="60"></textarea>")已经能提取内容并存储了,但textarea的大小又固定了,rows和cols根本不起作用,请问怎样才能改变textarea的大小.
document.write("<textarea name=EditCtrl rows="+rows1+" cols="+cols1+"></textarea>")
<FORM NAME="formName">
<INPUT TYPE="checkbox"
ONCLICK="if (this.checked){
this.form.aField.style.fontSize = '16pt';
this.form.aField.style.fontWeight = 'bold';
this.form.aField.style.backgroundColor = '#ff0000';
this.form.aField.style.fontFamily = '黑体';}
else
this.form.aField.style.fontWeight = 'normal';"
>点击测试<br>
<textarea NAME="aField" VALUE="测试">测试文字</textarea>
</FORM>
颜色也是可以改变的:
<FORM NAME="formName"><INPUT TYPE="checkbox"
ONCLICK="if (this.checked){
this.form.aField.style.fontSize = '16pt';
this.form.aField.style.fontWeight = 'bold';
this.form.aField.style.color = '#ff0000';
this.form.aField.style.fontFamily = '黑体';}
else
this.form.aField.style.fontWeight = 'normal';"
>点击测试<br>
<textarea NAME="aField" VALUE="测试">测试文字</textarea>
</FORM>
<FORM NAME="formName">
<INPUT TYPE="checkbox"
ONCLICK="if (this.checked){
this.form.aField.style.fontSize = '16pt';
this.form.aField.style.fontWeight = 'normal';
this.form.aField.style.color = '#ff0000';
this.form.aField.style.fontFamily = '黑体';
this.form.aField.style.backgroundColor = '#ccffcc';
this.form.aField.style.fontFamily = '黑体';
this.form.aField.style.textDecoration = 'none line-through';
this.form.aField.style.fontStyle = 'normal';
this.form.aField.style.textAlign = 'left';
}
else
{this.form.aField.style.fontWeight = 'bold';
this.form.aField.style.fontSize = '48pt';
this.form.aField.style.textDecoration = 'underline';
this.form.aField.style.color = '#0099ff';
this.form.aField.style.fontFamily = '楷体_GB2312';
this.form.aField.style.backgroundColor = '#FFccFF';
this.form.aField.style.fontStyle = 'italic';
this.form.aField.style.textAlign = 'center';
}"
>点击测试<br>
<textarea NAME="aField" VALUE="测试">测试文字</textarea>
</FORM>