.Net页面中使用在线编辑框实例
--------------------------------------------
2 data="editor.htm" VIEWASTEXT>
3 </OBJECT>
4 <INPUT type="hidden" name="content">
5 <asp:Button id="Button1" runat="server" Text="Button1"></asp:Button>
<script language="javascript">
function CheckForm()
{
document.all.content.value=document.all.doc_html.value;
alert('aaaaaaaa'+document.all.content.value);
return true
}
</script>
编辑页后台代码中添加
-----------------------------------------------
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>
<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 TITLE="欢迎使用添加文章系统" >
<font color=red size=2px>
</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="240">
</iframe>
<script src="edit.js" type="text/javascript"></script>
</body>
</html>
JS文件edit.js
---------------------------------------------------
SEP_PADDING = 52
HANDLE_PADDING = 73
4
var yToolbars = new Array();5
6
var YInitialized = false;7
8
function 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
35
function 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
47
function 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
95
function 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
111
function YCancelEvent()112
{113
event.returnValue=false;114
event.cancelBubble=true;115
return false;116
}117
118
function BtnMouseOver()119
{120
if (event.srcElement.tagName != "IMG") return false;121
var image = event.srcElement;122
var element = image.parentElement;123
124
if (image.className == "Ico") element.className = "BtnMouseOverUp";125
else if (image.className == "IcoDown") element.className = "BtnMouseOverDown";126
127
event.cancelBubble = true;128
}129
130
function BtnMouseOut()131
{132
if (event.srcElement.tagName != "IMG") {133
event.cancelBubble = true;134
return false;135
}136
137
var image = event.srcElement;138
var element = image.parentElement;139
yRaisedElement = null;140
141
element.className = "Btn";142
image.className = "Ico";143
144
event.cancelBubble = true;145
}146
147
function BtnMouseDown()148
{149
if (event.srcElement.tagName != "IMG") {150
event.cancelBubble = true;151
event.returnValue=false;152
return false;153
}154
155
var image = event.srcElement;156
var element = image.parentElement;157
158
element.className = "BtnMouseOverDown";159
image.className = "IcoDown";160
161
event.cancelBubble = true;162
event.returnValue=false;163
return false;164
}165
166
function BtnMouseUp()167
{168
if (event.srcElement.tagName != "IMG") {169
event.cancelBubble = true;170
return false;171
}172
173
var image = event.srcElement;174
var element = 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
return false;183
}184
185
186
function DebugObject(obj)187
{188
var msg = "";189
for (var i in TB) {190
ans=prompt(i+"="+TB[i]+"\n");191
if (! ans) break;192
}193
}194
195
function 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
269
function DoLayout()270
{271
LayoutTBs();272
}273
274
function validateMode()275
{276
if (! bTextMode) return true;277
alert("请取消“使用 HTML 语法书写”选项再使用系统编辑功能!");278
Composition.focus();279
return false;280
}281
282
function format1(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
else Composition.document.execCommand(what,"",opt);292
293
pureText = false;294
Composition.focus();295
}296
297
function format(what,opt)298
{299
if (!validateMode()) return;300
301
format1(what,opt);302
}303
304
function setMode(newMode)305
{306
bTextMode = newMode;307
var cont;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
function getEl(sTag,start)323
{324
while ((start!=null) && (start.tagName!=sTag)) start = start.parentElement;325
return start;326
}327
328
function UserDialog(what)329
{330
if (!validateMode()) return;331
332
Composition.document.execCommand(what, true);333
334
pureText = false;335
Composition.focus();336
}337
338
function foreColor()339
{340
if (! validateMode()) return;341
var arr = showModalDialog("selcolor.htm", "", "dialogWidth:18.5em; dialogHeight:17.5em; status:0");342
if (arr != null) format('forecolor', arr);343
else Composition.focus();344
}345
346
function fortable()347
{348
if (! validateMode()) return;349
var arr = showModalDialog("table.htm", "", "dialogWidth:18.5em; dialogHeight:11.5em; status:0");350
351
if (arr != null){352
var ss;353
ss=arr.split("*")354
row=ss[0];355
col=ss[1];356
var string;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
else Composition.focus();371
}372
function cleanHtml()373
{374
var fonts = Composition.document.body.all.tags("FONT");375
var curr;376
for (var i = fonts.length - 1; i >= 0; i--) {377
curr = fonts[i];378
if (curr.style.backgroundColor == "#ffffff") curr.outerHTML = curr.innerHTML;379
}380
}381
382
function getPureHtml()383
{384
var str = "";385
var paras = Composition.document.body.all.tags("P");386
if (paras.length > 0) {387
for (var i=paras.length-1; i >= 0; i--) str = paras[i].innerHTML + "\n" + str;388
} else {389
str = Composition.document.body.innerHTML;390
}391
return str;392
}393
394
var bLoad=false395
var pureText=true396
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>"397
var bTextMode=false398
399
public_description=new Editor400
401
function Editor()402
{403
this.put_HtmlMode=setMode;404
this.put_value=putText;405
this.get_value=getText;406
}407
408
function getText()409
{410
if (bTextMode)411
return Composition.document.body.innerText;412
else413
{414
cleanHtml();415
cleanHtml();416
return Composition.document.body.innerHTML;417
}418
}419
420
function putText(v)421
{422
if (bTextMode)423
Composition.document.body.innerText = v;424
else425
Composition.document.body.innerHTML = v;426
}427
428
function InitDocument()429
{430
Composition.document.open();431
Composition.document.write(bodyTag);432
Composition.document.close();433
bLoad=true;434
}435
436
function doSelectClick(str, el) {437
var Index = 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
var bIsIE5 = navigator.userAgent.indexOf("IE 5") > -1;447
var edit;448
var RangeType;449
450
function specialtype(Mark){451
var strHTML;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
function selectRange(){462
edit = Composition.document.selection.createRange();463
RangeType = Composition.document.selection.type;464
}465
466
function help()467
{468
var helpmess;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代码
------------------------------------------------------------------------
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 }
