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

编辑页前台代码中添加
--------------------------------------------

1 <OBJECTid="doc_html"style="LEFT: 0px; TOP: 0px"type="text/x-scriptlet"height="320"width="100%"2 data="editor.htm"VIEWASTEXT>3 </OBJECT>4 <INPUTtype="hidden"name="content">
5 <asp:Button id="Button1" runat="server" Text="Button1"></asp:Button>

编辑页后台代码中添加
-----------------------------------------------
this.Button1.Attributes.Add("OnClick","CheckForm();");

编辑框代码,保存为editor.htm
-------------------------------------------------
<html>
<head>
<title>编辑系统</title>
<link rel="STYLESHEET" type="text/css" href="edit.css">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>

</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>">标题一
<option VALUE="<H2>">标题二
<option VALUE="<H3>">标题三
<option VALUE="<H4>">标题四
<option VALUE="<H5>">标题五
<option VALUE="<H6>">标题六
<option VALUE="<H7>">标题七
</select>
<select id="specialtype" class="TBGen" οnchange="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" οnclick="foreColor();">
<img class="Ico" src="data: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="细明体">细明体<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
---------------------------------------------------

SEP_PADDING=52

HANDLE_PADDING=73

varyToolbars=newArray();5

varYInitialized=false;7

functiondocument.onreadystatechange()9

{10

if(YInitialized)11

return;12

YInitialized=true;13

vari, s, curr;15

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

DoLayout();27

window.onresize=DoLayout;28

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

functionInitTB(y)36

{37

y.TBWidth=0;38

if(!PopulateTB(y))40

returnfalse;41

y.style.posWidth=y.TBWidth;43

returntrue;45

}46

functionPopulateTB(y)48

{49

vari, elements, element;50

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

switch(element.className)59

{60

case"Btn":61

if(element.YINITIALIZED==null)62

{63

if(!InitBtn(element))64

returnfalse;65

}66

element.style.posLeft=y.TBWidth;68

y.TBWidth+=element.offsetWidth+1;69

break;70

case"TBGen":72

element.style.posLeft=y.TBWidth;73

y.TBWidth+=element.offsetWidth+1;74

break;75

case"TBSep":77

element.style.posLeft=y.TBWidth+2;78

y.TBWidth+=SEP_PADDING;79

break;80

case"TBHandle":82

element.style.posLeft=2;83

y.TBWidth+=element.offsetWidth+HANDLE_PADDING;84

break;85

default:87

returnfalse;88

}89

}90

y.TBWidth+=1;92

returntrue;93

}94

functionInitBtn(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

returntrue;108

}109

110

111

functionYCancelEvent()112

{113

event.returnValue=false;114

event.cancelBubble=true;115

returnfalse;116

}117

118

functionBtnMouseOver()119

{120

if(event.srcElement.tagName!="IMG")returnfalse;121

varimage=event.srcElement;122

varelement=image.parentElement;123

124

if(image.className=="Ico") element.className="BtnMouseOverUp";125

elseif(image.className=="IcoDown") element.className="BtnMouseOverDown";126

127

event.cancelBubble=true;128

}129

130

functionBtnMouseOut()131

{132

if(event.srcElement.tagName!="IMG")

{133

event.cancelBubble=true;134

returnfalse;135

}136

137

varimage=event.srcElement;138

varelement=image.parentElement;139

yRaisedElement=null;140

141

element.className="Btn";142

image.className="Ico";143

144

event.cancelBubble=true;145

}146

147

functionBtnMouseDown()148

{149

if(event.srcElement.tagName!="IMG")

{150

event.cancelBubble=true;151

event.returnValue=false;152

returnfalse;153

}154

155

varimage=event.srcElement;156

varelement=image.parentElement;157

158

element.className="BtnMouseOverDown";159

image.className="IcoDown";160

161

event.cancelBubble=true;162

event.returnValue=false;163

returnfalse;164

}165

166

functionBtnMouseUp()167

{168

if(event.srcElement.tagName!="IMG")

{169

event.cancelBubble=true;170

returnfalse;171

}172

173

varimage=event.srcElement;174

varelement=image.parentElement;175

176

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

178

element.className="BtnMouseOverUp";179

image.className="Ico";180

181

event.cancelBubble=true;182

returnfalse;183

}184

185

186

functionDebugObject(obj)187

{188

varmsg="";189

for(variinTB)

{190

ans=prompt(i+"="+TB[i]+"\n");191

if(!ans)break;192

}193

}194

195

functionLayoutTBs()196

{197

NumTBs=yToolbars.length;198

199

if(NumTBs==0)200

return;201

202

vari;203

varScrWid=(document.body.offsetWidth)-6;204

varTotalLen=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

varPrevTB;213

varLastStart=0;214

varRelTop=0;215

varLastWid, CurrWid;216

217

varTB=yToolbars[0];218

TB.style.posTop=0;219

TB.style.posLeft=0;220

221

varStart=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

else234

{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

varTBInd=TB.sourceIndex;252

varA=TB.document.all;253

varitem;254

for(iinA)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

269

functionDoLayout()270

{271

LayoutTBs();272

}273

274

functionvalidateMode()275

{276

if(!bTextMode)returntrue;277

alert("请取消“使用 HTML 语法书写”选项再使用系统编辑功能!");278

Composition.focus();279

returnfalse;280

}281

282

functionformat1(what,opt)283

{284

if(opt=="removeFormat")285

{286

what=opt;287

opt=null;288

}289

290

if(opt==null) Composition.document.execCommand(what);291

elseComposition.document.execCommand(what,"",opt);292

293

pureText=false;294

Composition.focus();295

}296

297

functionformat(what,opt)298

{299

if(!validateMode())return;300

301

format1(what,opt);302

}303

304

functionsetMode(newMode)305

{306

bTextMode=newMode;307

varcont;308

if(bTextMode)

{309

cleanHtml();310

cleanHtml();311

312

cont=Composition.document.body.innerHTML;313

Composition.document.body.innerText=cont;314

}else

{315

cont=Composition.document.body.innerText;316

Composition.document.body.innerHTML=cont;317

}318

319

Composition.focus();320

}321

322

functiongetEl(sTag,start)323

{324

while((start!=null)&&(start.tagName!=sTag)) start=start.parentElement;325

returnstart;326

}327

328

functionUserDialog(what)329

{330

if(!validateMode())return;331

332

Composition.document.execCommand(what,true);333

334

pureText=false;335

Composition.focus();336

}337

338

functionforeColor()339

{340

if(!validateMode())return;341

vararr=showModalDialog("selcolor.htm","","dialogWidth:18.5em; dialogHeight:17.5em; status:0");342

if(arr!=null) format('forecolor', arr);343

elseComposition.focus();344

}345

346

functionfortable()347

{348

if(!validateMode())return;349

vararr=showModalDialog("table.htm","","dialogWidth:18.5em; dialogHeight:11.5em; status:0");350

351

if(arr!=null)

{352

varss;353

ss=arr.split("*")354

row=ss[0];355

col=ss[1];356

varstring;357

string="<table border=1>";358

for(i=1;i<=row;i++)

{359

string=string+"<tr>";360

for(j=1;j<=col;j++)

{361

string=string+"<td></td>";362

}363

string=string+"</tr>";364

}365

string=string+"</table>";366

content=Composition.document.body.innerHTML;367

content=content+string;368

Composition.document.body.innerHTML=content;369

}370

elseComposition.focus();371

}372

functioncleanHtml()373

{374

varfonts=Composition.document.body.all.tags("FONT");375

varcurr;376

for(vari=fonts.length-1; i>=0; i--)

{377

curr=fonts[i];378

if(curr.style.backgroundColor=="#ffffff") curr.outerHTML=curr.innerHTML;379

}380

}381

382

functiongetPureHtml()383

{384

varstr="";385

varparas=Composition.document.body.all.tags("P");386

if(paras.length>0)

{387

for(vari=paras.length-1; i>=0; i--) str=paras[i].innerHTML+"\n"+str;388

}else

{389

str=Composition.document.body.innerHTML;390

}391

returnstr;392

}393

394

varbLoad=false395

varpureText=true396

varbodyTag="<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>"397

varbTextMode=false398

399

public_description=newEditor400

401

functionEditor()402

{403

this.put_HtmlMode=setMode;404

this.put_value=putText;405

this.get_value=getText;406

}407

408

functiongetText()409

{410

if(bTextMode)411

returnComposition.document.body.innerText;412

else413

{414

cleanHtml();415

cleanHtml();416

returnComposition.document.body.innerHTML;417

}418

}419

420

functionputText(v)421

{422

if(bTextMode)423

Composition.document.body.innerText=v;424

else425

Composition.document.body.innerHTML=v;426

}427

428

functionInitDocument()429

{430

Composition.document.open();431

Composition.document.write(bodyTag);432

Composition.document.close();433

bLoad=true;434

}435

436

functiondoSelectClick(str, el)

{437

varIndex=el.selectedIndex;438

if(Index!=0)

{439

el.selectedIndex=0;440

if(el.id=="specialtype")441

specialtype(el.options[Index].value);442

else443

format(str,el.options[Index].value);444

}445

}446

varbIsIE5=navigator.userAgent.indexOf("IE 5")>-1;447

varedit;448

varRangeType;449

450

functionspecialtype(Mark)

{451

varstrHTML;452

if(bIsIE5) selectRange();453

if(RangeType=="Text")

{454

strHTML="<"+Mark+">"+edit.text+"</"+Mark+">";455

edit.pasteHTML(strHTML);456

Composition.focus();457

edit.select();458

}459

}460

461

functionselectRange()

{462

edit=Composition.document.selection.createRange();463

RangeType=Composition.document.selection.type;464

}465

466

functionhelp()467

{468

varhelpmess;469

helpmess="---------------帮助系统---------------\r\n\r\n"+470

"1.本系统支持任意贴图，可以再网上随便复制图像，然后粘贴\r\n\r\n"+471

"文档中，系统会自动帮您转换成为正常路径\r\n\r\n"+472

"3.可以用[img][/img]进行贴图.\r\n\r\n"+473

"4.出处和标题不能超过128个字符,若超过则自动截断.";474

alert(helpmess);475

476

}

edit.css代码
------------------------------------------------------------------------

1 .Gen2 {3 POSITION:relative4 }5 .heading6 {7 BACKGROUND:#eeeeee;8 COLOR:#0000009 }10 .Composition11 {12 BACKGROUND-COLOR:menu;13 POSITION:relative14 }15 .yToolbar16 {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:0px26 }27 .Btn28 {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:23px38 }39 .Ico40 {41 LEFT:2px;42 POSITION:absolute;43 TOP:1px44 }45 .TBSep46 {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:1px54 }55 .TBGen56 {57 FONT:8pt verdana,arial,sans-serif;58 HEIGHT:22px;59 POSITION:absolute;60 TOP:2px61 }62 .TBHandle63 {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:3px73 }74 .BtnMouseOverUp75 {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:24px85 }86 .BtnMouseOverDown87 {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:24px97 }98 .BtnDown99 {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:24px109 }110 .IcoDown111 {112 HEIGHT:23px;113 LEFT:0px;114 POSITION:absolute;115 TOP:0px;116 WIDTH:24px117 }118 .IcoDownPressed119 {120 LEFT:1px;121 POSITION:absolute;122 TOP:1px123 }

转载于:https://www.cnblogs.com/lyzxx/archive/2006/11/01/546840.html

.Net页面中使用在线编辑框实例相关推荐

文本编辑器中实现自定义编辑框中字体和大小的功能
文章目录 1 文本编辑器中实现自定义编辑框中字体和大小的功能 1 文本编辑器中实现自定义编辑框中字体和大小的功能实现思路: 通过QFontDialog选择字体及大小. 将QFont对象设置到文本编辑 ...
知识管理系统中的在线编辑，让共享协作更简便
编者按:共享协作越来越被企业重视,那么如何实现企业内部共享协作呢?在线编辑是关键,本文分析了共享协作的作用,并进一步介绍了知识管理中的在线编辑功能. 关键词: 在线编辑,在线预览,资料分享,全文检索, ...
android h5弹窗,Android嵌套html5页面中alert 弹出框问题
最近项目中遇到一个头疼的问题,那就是在安卓里嵌套html5的时候发现alert弹出框出现了问题那就是弹出的时候会出现串来自http://xxxxx 网页的提示然后下面出来具体的弹出信息,还有更奇 ...
vue3—elementPlus如何单独修改页面中的下拉框样式
vue3中只能去修改popper-class这个属性去修改 (自己想要的样式)重点 :样式修改不能写在scoped中,可以单独开个style popper-class="blueBack&q ...
html5页面中鼠标悬停效果,CSS实例：非常不错的鼠标悬停TIP效果！_div+css布局教程...
在实际开发中,我们会给图片加上alt.给链接加上title,为了出故障预备,也可以提醒用户的内容是什么,或仅仅是tip提示.今天我们介绍一款不错的鼠标悬停TIP效果,图片如下: 这样的效果在实际开发中 ...
android webview 多文件上传,Android中的webview支持页面中的文件上传实例代码
Android webview在默认情况下是不支持网页中的文件上传功能的: 如果在网页中有,在android webview中访问时也会出现浏览文件的按钮但是点击按钮之后没有反应... 那么如何能够 ...
pdf.js使用方法整理，web页面中pdf在线查看，web页面显示pdf文档
pdf.js 使用步骤: 一.到官网下载 pdf.js 插件并解压 (地址: http://mozilla.github.io/pdf.js/ ) 若官网无法下载,通过下面链接下载,注:作者有测试方 ...
页面中的多选框的非空判断
var zffwlist=''; var zffw = document.getElementsByName("map.ZFFWDM"); for(var i=0;i<zff ...
Python读取VOC中的xml目标框实例
直接上代码.亲测可用.自己修改一下空格.python脚本对空格敏感 import xml.dom.minidom import cv2 import osfor name in os.listdir( ...

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

.Net页面中使用在线编辑框实例相关推荐

最新文章

热门文章