當(dāng)前位置：首頁 > 编程语言 > asp.net >内容正文

asp.net

.Net页面中使用在线编辑框实例

發(fā)布時間：2025/3/15 asp.net 27 豆豆

生活随笔收集整理的這篇文章主要介紹了 .Net页面中使用在线编辑框实例小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

編輯頁前臺代碼中添加
--------------------------------------------
1?????????????????????????????<OBJECT?id="doc_html"?style="LEFT:?0px;?TOP:?0px"?type="text/x-scriptlet"?height="320"?width="100%"
2?????????????????????????????????data="editor.htm"?VIEWASTEXT>
3?????????????????????????????</OBJECT>
4?????????????????????????????<INPUT?type="hidden"?name="content">?????????
5????????????????????????????<asp:Button id="Button1" runat="server" Text="Button1"></asp:Button>???????????????????

<div? TITLE="歡迎使用添加文章系統(tǒng)" >
            
            
            
<font color=red size=2px>

</font>
</div>

</div>

<div class="yToolbar">
<div class="TBHandle"></div>
<select ID="formatSelect" class="TBGen" title="段落格式" οnchange="doSelectClick('FormatBlock',this)" style="font: icon; width: 80px;">
<option>段落格式</option>
<option VALUE="<P>">普通
<option VALUE="<PRE>">已編排格式
<option VALUE="<H1>">標(biāo)題一
<option VALUE="<H2>">標(biāo)題二
<option VALUE="<H3>">標(biāo)題三
<option VALUE="<H4>">標(biāo)題四
<option VALUE="<H5>">標(biāo)題五
<option VALUE="<H6>">標(biāo)題六
<option VALUE="<H7>">標(biāo)題七
</select>
<select id="specialtype" class="TBGen" οnchange="doSelectClick('FormatBlock',this)" style="font: icon; width: 100px;">
<option>特殊字體格式</option>
<option VALUE="SUP">上標(biāo)
<option VALUE="SUB">下標(biāo)
<option VALUE="DEL">刪除線
<option VALUE="BLINK">閃爍
<option VALUE="BIG">增大字體
<option VALUE="SMALL">減小字體
</select>
<div class="Btn" TITLE="字體顏色" LANGUAGE="javascript" οnclick="foreColor();">
<img class="Ico" src="images\fgcolor.gif" WIDTH="23" HEIGHT="22">
</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="字體名" οnchange="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="細(xì)明體">細(xì)明體<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="字號大小" οnchange="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 οnclick="setMode(this.checked);" type="checkbox">使用 HTML 語法書寫 </div></div>

</div>

</body>
</html>

JS文件edit.js
---------------------------------------------------

??1SEP_PADDING?=?5
??2HANDLE_PADDING?=?7
??3
??4var?yToolbars?=????new?Array();
??5
??6var?YInitialized?=?false;
??7
??8function?document.onreadystatechange()
??9{
?10????if?(YInitialized)?
?11????????return;
?12????YInitialized?=?true;
?13
?14????var?i,?s,?curr;
?15
?16????for?(i=0;?i<document.body.all.length;????i++)
?17????{
?18????????curr=document.body.all[i];
?19????????if?(curr.className?==?"yToolbar")
?20????????{
?21????????????InitTB(curr);
?22????????????yToolbars[yToolbars.length]?=?curr;
?23????????}
?24????}
?25
?26????DoLayout();
?27????window.onresize?=?DoLayout;
?28
?29????Composition.document.open()
?30????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>");
?31????Composition.document.close()
?32????Composition.document.designMode="On"
?33}
?34
?35function?InitTB(y)
?36{
?37????y.TBWidth?=?0;
?38
?39????if?(!PopulateTB(y))?
?40????????return?false;
?41
?42????y.style.posWidth?=?y.TBWidth;
?43
?44????return?true;
?45}
?46
?47function?PopulateTB(y)
?48{
?49????var?i,?elements,?element;
?50
?51????elements?=?y.children;
?52????for?(i=0;?i<elements.length;?i++)?
?53????{
?54????????element?=?elements[i];
?55????????if?(element.tagName????==?"SCRIPT"?||?element.tagName?==?"!")?
?56????????????continue;
?57
?58????????switch?(element.className)?
?59????????{
?60????????????case?"Btn":
?61????????????????if?(element.YINITIALIZED?==?null)????
?62????????????????{
?63????????????????????if?(!InitBtn(element))
?64????????????????????????return?false;
?65????????????????}
?66
?67????????????????element.style.posLeft?=?y.TBWidth;
?68????????????????y.TBWidth????+=?element.offsetWidth?+?1;
?69????????????????break;
?70
?71????????????case?"TBGen":
?72????????????????element.style.posLeft?=?y.TBWidth;
?73????????????????y.TBWidth????+=?element.offsetWidth?+?1;
?74????????????????break;
?75
?76????????????case?"TBSep":
?77????????????????element.style.posLeft?=?y.TBWidth????+?2;
?78????????????????y.TBWidth????+=?SEP_PADDING;
?79????????????????break;
?80
?81????????????case?"TBHandle":
?82????????????????element.style.posLeft?=?2;
?83????????????????y.TBWidth????+=?element.offsetWidth?+?HANDLE_PADDING;
?84????????????????break;
?85
?86????????????default:
?87????????????return?false;
?88????????}
?89????}
?90
?91????y.TBWidth?+=?1;
?92????return?true;
?93}
?94
?95function?InitBtn(btn)
?96{
?97????btn.onmouseover?=?BtnMouseOver;
?98????btn.onmouseout?=?BtnMouseOut;
?99????btn.onmousedown?=?BtnMouseDown;
100????btn.onmouseup????=?BtnMouseUp;
101????btn.ondragstart?=?YCancelEvent;
102????btn.onselectstart?=?YCancelEvent;
103????btn.onselect?=?YCancelEvent;
104????btn.YUSERONCLICK?=?btn.onclick;
105????btn.onclick?=????YCancelEvent;
106????btn.YINITIALIZED?=?true;
107????return?true;
108}
109
110
111function?YCancelEvent()
112{
113event.returnValue=false;
114event.cancelBubble=true;
115return?false;
116}
117
118function?BtnMouseOver()
119{
120if?(event.srcElement.tagName?!=?"IMG")?return????false;
121var?image?=?event.srcElement;
122var?element?=????image.parentElement;
123
124if?(image.className?==?"Ico")????element.className?=?"BtnMouseOverUp";
125else?if?(image.className?==?"IcoDown")?element.className?=?"BtnMouseOverDown";
126
127event.cancelBubble?=?true;
128}
129
130function?BtnMouseOut()
131{
132if?(event.srcElement.tagName?!=?"IMG")?{
133event.cancelBubble?=?true;
134return?false;
135}
136
137var?image?=?event.srcElement;
138var?element?=????image.parentElement;
139yRaisedElement?=?null;
140
141element.className?=?"Btn";
142image.className?=?"Ico";
143
144event.cancelBubble?=?true;
145}
146
147function?BtnMouseDown()
148{
149if?(event.srcElement.tagName?!=?"IMG")?{
150event.cancelBubble?=?true;
151event.returnValue=false;
152return?false;
153}
154
155var?image?=?event.srcElement;
156var?element?=????image.parentElement;
157
158element.className?=?"BtnMouseOverDown";
159image.className?=?"IcoDown";
160
161event.cancelBubble?=?true;
162event.returnValue=false;
163return?false;
164}
165
166function?BtnMouseUp()
167{
168if?(event.srcElement.tagName?!=?"IMG")?{
169event.cancelBubble?=?true;
170return?false;
171}
172
173var?image?=?event.srcElement;
174var?element?=????image.parentElement;
175
176if?(element.YUSERONCLICK)?eval(element.YUSERONCLICK?+????"anonymous()");
177
178element.className?=?"BtnMouseOverUp";
179image.className?=?"Ico";
180
181event.cancelBubble?=?true;
182return?false;
183}
184
185
186function?DebugObject(obj)
187{
188var?msg?=?"";
189for?(var?i?in????TB)?{
190ans=prompt(i+"="+TB[i]+"\n");
191if?(!?ans)?break;
192}
193}
194
195function?LayoutTBs()
196{
197????NumTBs?=?yToolbars.length;
198
199????if?(NumTBs?==?0)?
200????????return;
201
202????var?i;
203????var?ScrWid?=?(document.body.offsetWidth)?-?6;
204????var?TotalLen?=?ScrWid;
205????for?(i?=?0?;?i?<?NumTBs?;?i++)?
206????{
207????????TB?=?yToolbars[i];
208????????if?(TB.TBWidth?>?TotalLen)?
209????????????TotalLen????=?TB.TBWidth;
210????}
211
212????var?PrevTB;
213????var?LastStart????=?0;
214????var?RelTop?=?0;
215????var?LastWid,?CurrWid;
216
217????var?TB?=?yToolbars[0];
218????TB.style.posTop?=?0;
219????TB.style.posLeft?=?0;
220
221????var?Start?=?TB.TBWidth;
222????for?(i?=?1?;?i?<?yToolbars.length?;?i++)?
223????{
224????????PrevTB?=?TB;
225????????TB?=?yToolbars[i];
226????????CurrWid?=?TB.TBWidth;
227
228????????if?((Start?+?CurrWid)?>?ScrWid)?
229????????{
230????????????Start?=?0;
231????????????LastWid?=????TotalLen?-?LastStart;
232????????}
233????????else?
234????????{
235????????????LastWid?=????PrevTB.TBWidth;
236????????????RelTop?-=????TB.offsetHeight;
237????????}
238
239????????TB.style.posTop?=?RelTop;
240????????TB.style.posLeft?=?Start;
241????????PrevTB.style.width?=?LastWid;
242
243????????LastStart?=????Start;
244????????Start?+=?CurrWid;
245????}
246
247????TB.style.width?=?TotalLen?-?LastStart;
248
249????i--;
250????TB?=?yToolbars[i];
251????var?TBInd?=?TB.sourceIndex;
252????var?A????=?TB.document.all;
253????var?item;
254????for?(i?in?A)
255????{
256????????item?=?A.item(i);
257????????if?(!?item)
258????????????continue;
259????????if?(!?item.style)
260????????????continue;
261????????if?(item.sourceIndex?<=?TBInd)
262????????????continue;
263????????if?(item.style.position?==?"absolute")?
264????????????continue;
265????????item.style.posTop?=????RelTop;
266????}
267}
268
269function?DoLayout()
270{
271????LayoutTBs();
272}
273
274function?validateMode()
275{
276if?(!????bTextMode)?return?true;
277alert("請取消“使用?HTML?語法書寫”選項再使用系統(tǒng)編輯功能!");
278Composition.focus();
279return?false;
280}
281
282function?format1(what,opt)
283{
284if?(opt=="removeFormat")
285{
286what=opt;
287opt=null;
288}
289
290if?(opt==null)?Composition.document.execCommand(what);
291else?Composition.document.execCommand(what,"",opt);
292
293pureText?=?false;
294Composition.focus();
295}
296
297function?format(what,opt)
298{
299if?(!validateMode())?return;
300
301format1(what,opt);
302}
303
304function?setMode(newMode)
305{
306bTextMode?=?newMode;
307var?cont;
308if?(bTextMode)?{
309cleanHtml();
310cleanHtml();
311
312cont=Composition.document.body.innerHTML;
313Composition.document.body.innerText=cont;
314}?else?{
315cont=Composition.document.body.innerText;
316Composition.document.body.innerHTML=cont;
317}
318
319Composition.focus();
320}
321
322function?getEl(sTag,start)
323{
324while????((start!=null)?&&?(start.tagName!=sTag))?start?=?start.parentElement;
325return?start;
326}
327
328function?UserDialog(what)
329{
330if?(!validateMode())?return;
331
332Composition.document.execCommand(what,?true);
333
334pureText?=?false;
335Composition.focus();
336}
337
338function?foreColor()
339{
340if?(!????validateMode())????return;
341var?arr?=?showModalDialog("selcolor.htm",?"",?"dialogWidth:18.5em;?dialogHeight:17.5em;?status:0");
342if?(arr?!=?null)?format('forecolor',?arr);
343else?Composition.focus();
344}
345
346function?fortable()
347{
348if?(!????validateMode())????return;
349var?arr?=?showModalDialog("table.htm",?"",?"dialogWidth:18.5em;?dialogHeight:11.5em;?status:0");
350
351if?(arr?!=?null){
352var?ss;
353ss=arr.split("*")
354row=ss[0];
355col=ss[1];
356var?string;
357string="<table?border=1>";
358for(i=1;i<=row;i++){
359string=string+"<tr>";
360for(j=1;j<=col;j++){
361string=string+"<td></td>";
362}
363string=string+"</tr>";
364}
365string=string+"</table>";
366content=Composition.document.body.innerHTML;
367content=content+string;
368Composition.document.body.innerHTML=content;
369}
370else?Composition.focus();
371}
372function?cleanHtml()
373{
374var?fonts?=?Composition.document.body.all.tags("FONT");
375var?curr;
376for?(var?i?=?fonts.length?-?1;?i?>=?0;?i--)?{
377curr?=?fonts[i];
378if?(curr.style.backgroundColor?==?"#ffffff")?curr.outerHTML????=?curr.innerHTML;
379}
380}
381
382function?getPureHtml()
383{
384var?str?=?"";
385var?paras?=?Composition.document.body.all.tags("P");
386if?(paras.length?>?0)????{
387for????(var?i=paras.length-1;?i?>=?0;?i--)?str????=?paras[i].innerHTML?+?"\n"?+?str;
388}?else?{
389str????=?Composition.document.body.innerHTML;
390}
391return?str;
392}
393
394var?bLoad=false
395var?pureText=true
396var?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>"
397var?bTextMode=false
398
399public_description=new?Editor
400
401function?Editor()
402{
403this.put_HtmlMode=setMode;
404this.put_value=putText;
405this.get_value=getText;
406}
407
408function?getText()
409{
410if?(bTextMode)
411return?Composition.document.body.innerText;
412else
413{
414cleanHtml();
415cleanHtml();
416return?Composition.document.body.innerHTML;
417}
418}
419
420function?putText(v)
421{
422if?(bTextMode)
423Composition.document.body.innerText?=?v;
424else
425Composition.document.body.innerHTML?=?v;
426}
427
428function?InitDocument()
429{
430Composition.document.open();
431Composition.document.write(bodyTag);
432Composition.document.close();
433bLoad=true;
434}
435
436function?doSelectClick(str,?el)?{
437var?Index?=?el.selectedIndex;
438if?(Index?!=?0){
439el.selectedIndex?=?0;
440if?(el.id?==?"specialtype")
441specialtype(el.options[Index].value);
442else
443format(str,el.options[Index].value);
444}
445}
446var?bIsIE5?=?navigator.userAgent.indexOf("IE?5")??>?-1;
447var?edit;
448var?RangeType;
449
450function?specialtype(Mark){
451var?strHTML;
452if?(bIsIE5)?selectRange();????
453if?(RangeType?==?"Text"){
454strHTML?=?"<"?+?Mark?+?">"?+?edit.text?+?"</"?+?Mark?+?">";
455edit.pasteHTML(strHTML);
456Composition.focus();
457edit.select();
458}????????
459}
460
461function?selectRange(){
462edit?=?Composition.document.selection.createRange();
463RangeType?=??Composition.document.selection.type;
464}
465
466function?help()
467{
468var?helpmess;
469helpmess="---------------幫助系統(tǒng)---------------\r\n\r\n"+
470"1.本系統(tǒng)支持任意貼圖，可以再網(wǎng)上隨便復(fù)制圖像，然后粘貼\r\n\r\n"+
471"文檔中，系統(tǒng)會自動幫您轉(zhuǎn)換成為正常路徑\r\n\r\n"+
472"3.可以用[img][/img]進行貼圖.\r\n\r\n"+
473"4.出處和標(biāo)題不能超過128個字符,若超過則自動截斷.";
474alert(helpmess);
475
476}
edit.css代碼
------------------------------------------------------------------------
??1?.Gen
??2?{
??3?POSITION:?relative
??4?}
??5?.heading
??6?{
??7?BACKGROUND:?#eeeeee;
??8?COLOR:?#000000
??9?}
?10?.Composition
?11?{
?12?BACKGROUND-COLOR:?menu;
?13?POSITION:?relative
?14?}
?15?.yToolbar
?16?{
?17?BACKGROUND-COLOR:?menu;
?18?BORDER-BOTTOM:?buttonshadow?1px?solid;
?19?BORDER-LEFT:?buttonhighlight?1px?solid;
?20?BORDER-RIGHT:?buttonshadow?1px?solid;
?21?BORDER-TOP:?buttonhighlight?1px?solid;
?22?HEIGHT:?27px;
?23?LEFT:?0px;
?24?POSITION:?relative;
?25?TOP:?0px
?26?}
?27?.Btn
?28?{
?29?BACKGROUND-COLOR:?menu;
?30?BORDER-BOTTOM:?buttonface?1px?solid;
?31?BORDER-LEFT:?buttonface?1px?solid;
?32?BORDER-RIGHT:?buttonface?1px?solid;
?33?BORDER-TOP:?buttonface?1px?solid;
?34?HEIGHT:?23px;
?35?POSITION:?absolute;
?36?TOP:?1px;
?37?WIDTH:?23px
?38?}
?39?.Ico
?40?{
?41?LEFT:?2px;
?42?POSITION:?absolute;
?43?TOP:?1px
?44?}
?45?.TBSep
?46?{
?47?BORDER-LEFT:?buttonshadow?1px?solid;
?48?BORDER-RIGHT:?buttonhighlight?1px?solid;
?49?FONT-SIZE:?0px;
?50?HEIGHT:?22px;
?51?POSITION:?absolute;
?52?TOP:?1px;
?53?WIDTH:?1px
?54?}
?55?.TBGen
?56?{
?57?FONT:?8pt?verdana,arial,sans-serif;
?58?HEIGHT:?22px;
?59?POSITION:?absolute;
?60?TOP:?2px
?61?}
?62?.TBHandle
?63?{
?64?BACKGROUND-COLOR:?menu;
?65?BORDER-LEFT:?buttonhighlight?1px?solid;
?66?BORDER-RIGHT:?buttonshadow?1px?solid;
?67?BORDER-TOP:?buttonhighlight?1px?solid;
?68?FONT-SIZE:?1px;
?69?HEIGHT:?22px;
?70?POSITION:?absolute;
?71?TOP:?1px;
?72?WIDTH:?3px
?73?}
?74?.BtnMouseOverUp
?75?{
?76?BACKGROUND-COLOR:?buttonface;
?77?BORDER-BOTTOM:?buttonshadow?1px?solid;
?78?BORDER-LEFT:?buttonhighlight?1px?solid;
?79?BORDER-RIGHT:?buttonshadow?1px?solid;
?80?BORDER-TOP:?buttonhighlight?1px?solid;
?81?HEIGHT:?23px;
?82?POSITION:?absolute;
?83?TOP:?1px;
?84?WIDTH:?24px
?85?}
?86?.BtnMouseOverDown
?87?{
?88?BACKGROUND-COLOR:?buttonface;
?89?BORDER-BOTTOM:?buttonhighlight?1px?solid;
?90?BORDER-LEFT:?buttonshadow?1px?solid;
?91?BORDER-RIGHT:?buttonhighlight?1px?solid;
?92?BORDER-TOP:?buttonshadow?1px?solid;
?93?HEIGHT:?23px;
?94?POSITION:?absolute;
?95?TOP:?1px;
?96?WIDTH:?24px
?97?}
?98?.BtnDown
?99?{
100?BACKGROUND-COLOR:?gainsboro;
101?BORDER-BOTTOM:?buttonhighlight?1px?solid;
102?BORDER-LEFT:?buttonshadow?1px?solid;
103?BORDER-RIGHT:?buttonhighlight?1px?solid;
104?BORDER-TOP:?buttonshadow?1px?solid;
105?HEIGHT:?23px;
106?POSITION:?absolute;
107?TOP:?1px;
108?WIDTH:?24px
109?}
110?.IcoDown
111?{
112?HEIGHT:?23px;
113?LEFT:?0px;
114?POSITION:?absolute;
115?TOP:?0px;
116?WIDTH:?24px
117?}
118?.IcoDownPressed
119?{
120?LEFT:?1px;
121?POSITION:?absolute;
122?TOP:?1px
123?}

轉(zhuǎn)載于:https://www.cnblogs.com/lyzxx/archive/2006/11/01/546840.html

總結(jié)

以上是生活随笔為你收集整理的.Net页面中使用在线编辑框实例的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇：实时的毛发绘制 szlongman
下一篇：长三角，也开始“东北化”了