+ -
当前位置:首页 → 问答吧 → 我的简易HTML在线编辑器(转载)

我的简易HTML在线编辑器(转载)

时间:2008-10-18

来源:互联网

这篇关于自己做的简单功能的html在线编辑器一直想写,直到今天才有机会,以前都是直接把网络上的拿来嵌在iframe中,好用自然不说,版权可就要谨慎了,这次只涉及到几个简单的功能,于是自己试着做了个简单功能的,查了很多资料,也试了很多次,写下总结,就当为以后改进使用留份资料参考,同时我也将继续改进。

添加文章时可以使用如下方式(编辑时必须拆开使用)
function document.onreadystatechange()
{
HtmlEdit.document.designMode = "On"
}
document.onreadystatechange()相当于body的onload()//以下语句相当于打开iframe可编辑功能,每次打开时都会重新初始化iframe
HtmlEdit.document.designMode = "On"
//将焦点定位在iframe中,通过selection.createRange()来获得在iframe中选中的区域
HtmlEdit.focus();
var sel = HtmlEdit.document.selection.createRange();
对于selection.createRange()网络上使用的例子多半是
function doB(){
HtmlEdit.focus();
var sel = HtmlEdit.document.selection.createRange();
insertHTML(""+sel.text+"");
}
如果只是几个功能还行,多个,难道写一堆function,直接使用DHTML中的excommand效率更高
//插入各种链接
function format(cmd,opt)
{
textContent.document.execCommand(cmd,"",opt);
textContent.focus();
}

在DHTML中
execCommand的解释:
Executes a command on the current document, current selection, or the given range.
bSuccess = object.execCommand(sCommand [, bUserInterface] [, vValue])
selectedIndex的解释:
selectedIndex Property :Sets or retrieves the index of the selected option in a select object

调用此函数的链接代码


<select name=\"select3\" ID=\"formatSelect\" onchange=\"format('FormatBlock',this[this.selectedIndex].value);this.selectedIndex=0\">
<option selected>段落格式</option>
<option VALUE=\"&lt&gt;\">普通</option>
<option VALUE=\"&ltRE&gt;\">已编排格式</option>
<option VALUE=\"&lt;H1&gt;\">标题一</option>
<option VALUE=\"&lt;H2&gt;\">标题二</option>
<option VALUE=\"&lt;H3&gt;\">标题三</option>
<option VALUE=\"&lt;H4&gt;\">标题四</option>
<option VALUE=\"&lt;H5&gt;\">标题五</option>
<option VALUE=\"&lt;H6&gt;\">标题六</option>
<option VALUE=\"&lt;H7&gt;\">标题七</option>
</select>

<select onchange=\"format('FontName',this[this.selectedIndex].value);this.selectedIndex=0\">
<option selected>字体</option>
<option value=\"宋体\">宋体</option>
<option value=\"黑体\">黑体</option>
<option value=\"楷体_GB2312\">楷体</option>
<option value=\"仿宋_GB2312\">仿宋</option>
<option value=\"Arial\">Arial</option>
<option value=\"Arial Black\">Arial Black</option>
<option value=\"Arial Narrow\">Arial Narrow</option>
<option value=\"Brush Script MT\">Brush Script MT</option>
<option value=\"Century Gothic\">Century Gothic</option>
<option value=\"Comic Sans MS\">Comic Sans MS</option>
<option value=\"Courier\">Courier</option>
<option value=\"Courier New\">Courier New</option>
<option value=\"MS Sans Serif\">MS Sans Serif</option>
<option value=\"Script\">Script</option>
<option value=\"System\">System</option>
<option value=\"Times New Roman\">Times New Roman</option>
<option value=\"Verdana\">Verdana</option>
<option value=\"Wide Latin\">Wide Latin</option>
<option value=\"Wingdings\">Wingdings</option>
</select>

<SELECT onchange=\"format('fontsize',this[this.selectedIndex].value);\">
<option selected>字号</option>
<option value=\"7\">一号</option>
<option value=\"6\">二号</option>
<option value=\"5\">三号</option>
<option value=\"4\">四号</option>
<option value=\"3\">五号</option>
<option value=\"2\">六号</option>
<option value=\"1\">七号</option>
</SELECT>

<a href title=\"加粗\" onclick=\"format('Bold')\"><img src=\"button.bold.gif\" board=\"0\" style=\"cursor: hand;\"></a>
<a href title=\"斜体\" onclick=\"format('Italic')\"><img src=\"button.italic.gif\" board=\"0\" style=\"cursor: hand;\"></a>
<a href title=\"下划线\" onclick=\"format('Underline')\"><img src=\"button.underline.gif\" board=\"0\" style=\"cursor: hand;\"></a>
<a href title=\"字体颜色\" onclick=\"foreColor()\"><img src=\"button.textcolor.gif\" board=\"0\" style=\"cursor: hand;\"></a>
<a href title=\"剪切\" onclick=\"format('Cut')\"><img src=\"button.cut.gif\" board=\"0\" style=\"cursor: hand;\"></a>
<a href title=\"复制\" onclick=\"format('Copy')\"><img src=\"button.copy.gif\" board=\"0\" style=\"cursor: hand;\"></a>
<a href title=\"粘贴\" onclick=\"format('Paste')\"><img src=\"button.pastetext.gif\" board=\"0\" style=\"cursor: hand;\"></a>
<a href title=\"居中\" onclick=\"format('JustifyCenter')\"><img src=\"button.justifycenter.gif\" board=\"0\" style=\"cursor: hand;\"></a>
<a href title=\"左对齐\" onclick=\"format('JustifyLeft')\"><img src=\"button.justifyleft.gif\" board=\"0\" style=\"cursor: hand;\"></a>
<a href title=\"右对齐\" onclick=\"format('JustifyRight')\"><img src=\"button.justifyright.gif\" board=\"0\" style=\"cursor: hand;\"></a>

<a href title=\"插入超链接\" onClick=\"format('CreateLink')\"><img src=\"button.link.gif\" border=\"0\" style=\"cursor: hand;\"></a>
<a href title=\"清除链接\" onClick=\"format('Unlink')\"><img src=\"button.unlink.gif\" border=0></a>
<a href title=\"项目符号\" onClick=\"format('InsertUnorderedList')\"><img src=\"button.blist.gif\" border=\"0\" style=\"cursor: hand;\"></a>
<a href title=\"编号\" onClick=\"format('insertorderedlist')\"><img src=\"button.nlist.gif\" border=\"0\" style=\"cursor: hand;\"></a>
<a href title=\"回退\" onClick=\"format('Outdent')\"><img src=\"button.outdent.gif\" style=\"cursor: hand;\" ></a>
<a href title=\"缩进\" onClick=\"format('indent')\"><img src=\"button.indent.gif\" border=\"0\" style=\"cursor: hand;\"></a>

<a href title=\"插入图片地址\" onclick=\"pic()\"><img src=\"button.image1.gif\" board=\"0\" style=\"cursor: hand;\"></a>
<a href title=\"插入flash\" onclick=\"swf()\"><img src=\"button.swf.gif\" board=\"0\" style=\"cursor: hand;\"></a>
<a href title=\"插入视频\" onclick=\"wmv()\"><img src=\"button.wmv.gif\" board=\"0\" style=\"cursor: hand;\"></a>

作者: 水晶   发布时间: 2008-10-18

插入字体颜色、图片、flash、视频的以另一个页面载入
function foreColor()
{

var arr = showModalDialog(\"selcolor.htm\", \"\", \"dialogWidth:18.5em; dialogHeight:17.5em; status:0\");
if (arr != null) format('forecolor', arr);
else textContent.focus();
}

function pic()
{

textContent.focus();
var range = textContent.document.selection.createRange();
var arr = showModalDialog(\"pic.htm\", \"\", \"dialogWidth:30em; dialogHeight:20em; status:0;help:0\");
if (arr != null){
var ss;
ss=arr.split(\"*\")
a=ss[0];
b=ss[1];
c=ss[2];
d=ss[3];
e=ss[4];
f=ss[5];
g=ss[6];
h=ss[7];
i=ss[8];

var str1;
str1=\"<img src='\"+a+\"' alt='\"+b+\"'\"
if(d.value!='')str1=str1+\"width='\"+d+\"'\"
if(e.value!='')str1=str1+\"height='\"+e+\"' \"
str1=str1+\" border='\"+i+\"' align='\"+h+\"' vspace='\"+f+\"' hspace='\"+g+\"' style='\"+c+\"'\"
str1=str1+\">\"
content=textContent.document.body.innerHTML;
content=content+str1;
textContent.document.body.innerHTML=content;
}
else textContent.focus();
}

function swf()
{

textContent.focus();
var range = textContent.document.selection.createRange();
var arr = showModalDialog(\"flash.htm\", \"\", \"dialogWidth:30em; dialogHeight:10em; status:0;help:0\");
if (arr != null){
var ss;
ss=arr.split(\"*\")

path=ss[0];
row=ss[1];
col=ss[2];
var string;
string=\"<object classid='clsid27CDB6E-AE6D-11cf-96B8-444553540000' codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0' width=\"+row+\" height=\"+col+\"><param name=movie value=\"+path+\"><param name=quality value=high><embed src=\"+path+\" pluginspage='http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash' type='application/x-shockwave-flash' width=\"+row+\" height=\"+col+\"></embed></object>\"
content=textContent.document.body.innerHTML;
content=content+string;
textContent.document.body.innerHTML=content;
}
else textContent.focus();
}

function wmv()
{

textContent.focus();
var range = textContent.document.selection.createRange();
var arr = showModalDialog(\"media.htm\", \"\", \"dialogWidth:30em; dialogHeight:10em; status:0;help:0\");
if (arr != null){
var ss;
ss=arr.split(\"*\")
path=ss[0];
row=ss[1];
col=ss[2];
var string;
string=\"<object classid='clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95' width=\"+row+\" height=\"+col+\"><param name=Filename value=\"+path+\"><param name='BufferingTime' value='5'><param name='AutoSize' value='-1'><param name='AnimationAtStart' value='-1'><param name='AllowChangeDisplaySize' value='-1'><param name='ShowPositionControls' value='0'><param name='TransparentAtStart' value='1'><param name='ShowStatusBar' value='1'></object>\"
content=textContent.document.body.innerHTML;
content=content+string;
textContent.document.body.innerHTML=content;
}
else textContent.focus();
}

//===================
//调用flash.htm页面
//===================


<HTML><HEAD><TITLE>FLASH</TITLE>
<link rel=\"stylesheet\" type=\"text/css\" href=\"site.css\">

<script language=\"JavaScript\">
<!--

function SymError()
{
return true;
}

window.onerror = SymError;

var SymRealWinOpen = window.open;

function SymWinOpen(url, name, attributes)
{
return (new Object());
}

window.open = SymWinOpen;

//-->
</script>

<SCRIPT event=onclick for=Ok language=JavaScript>
window.returnValue = path.value+\"*\"+selrow.value+\"*\"+selcol.value
window.close();
</SCRIPT>
<script>
function IsDigit()
{
return ((event.keyCode >= 48) && (event.keyCode <= 57));
}
</script>
<BODY bgColor=menu topmargin=15 leftmargin=15 >
<CENTER><BR>
<table width=100%><tr><td>
<FIELDSET align=left>
<LEGEND align=left>插入网上FLASH动画</LEGEND>
<TABLE >
<TR><TD >地址:<INPUT id=path size=35 value=\" http://\"></td></TR>
<TR><TD >宽度:<INPUT id=selrow ONKEYPRESS=\"event.returnValue=IsDigit();\" value=500 size=7 maxlength=\"4\"> &nbsp;&nbsp;高度:<INPUT id=selcol ONKEYPRESS=\"event.returnValue=IsDigit();\" value=300 size=7 maxlength=\"4\"></TD></TR>
</TABLE></fieldset></td><td width=80 align=\"center\"><input type=submit value=' 确定 ' id=Ok><br><br><input type=button value=' 取消 ' onclick=\"window.close();\"></td></tr></table>

<script language=\"JavaScript\">
<!--
var SymRealOnLoad;
var SymRealOnUnload;

function SymOnUnload()
{
window.open = SymWinOpen;
if(SymRealOnUnload != null)
SymRealOnUnload();
}

function SymOnLoad()
{
if(SymRealOnLoad != null)
SymRealOnLoad();
window.open = SymRealWinOpen;
SymRealOnUnload = window.onunload;
window.onunload = SymOnUnload;
}

SymRealOnLoad = window.onload;
window.onload = SymOnLoad;

//-->
</script>

作者: 水晶   发布时间: 2008-10-18

//=============
//调用的media.htm
//============


<HTML><HEAD><TITLE>视频文件</TITLE>
<link rel=\"stylesheet\" type=\"text/css\" href=\"site.css\">

<script language=\"JavaScript\">
<!--

function SymError()
{
return true;
}

window.onerror = SymError;

var SymRealWinOpen = window.open;

function SymWinOpen(url, name, attributes)
{
return (new Object());
}

window.open = SymWinOpen;

//-->
</script>

<SCRIPT event=onclick for=Ok language=JavaScript>
window.returnValue = path.value+\"*\"+selrow.value+\"*\"+selcol.value
window.close();
</SCRIPT>
<script>
function IsDigit()
{
return ((event.keyCode >= 48) && (event.keyCode <= 57));
}
</script>
<BODY bgColor=menu topmargin=15 leftmargin=15 >
<CENTER><BR>
<table width=100%><tr><td>
<FIELDSET align=left>
<LEGEND align=left>插入网上视频文件</LEGEND>
<TABLE>
<TR><TD >地址:<INPUT id=path size=35 value=\" http://\"></td></TR>
<TR><TD >宽度:<INPUT id=selrow ONKEYPRESS=\"event.returnValue=IsDigit();\" value=500 size=7 maxlength=\"4\"> &nbsp;&nbsp;高度:<INPUT id=selcol ONKEYPRESS=\"event.returnValue=IsDigit();\" value=300 size=7 maxlength=\"4\"></TD></TR>
<TR><TD align=center>支持格式为:avi、wmv、asf</TD></TR>
</TABLE></fieldset></td><td width=80 align=\"center\"><input type=submit value=' 确定 ' id=Ok><br><br><input type=button value=' 取消 ' onclick=\"window.close();\"></td></tr></table>


<script language=\"JavaScript\">
<!--
var SymRealOnLoad;
var SymRealOnUnload;

function SymOnUnload()
{
window.open = SymWinOpen;
if(SymRealOnUnload != null)
SymRealOnUnload();
}

function SymOnLoad()
{
if(SymRealOnLoad != null)
SymRealOnLoad();
window.open = SymRealWinOpen;
SymRealOnUnload = window.onunload;
window.onunload = SymOnUnload;
}

SymRealOnLoad = window.onload;
window.onload = SymOnLoad;

//-->
</script>


//==================
//调用的pic.htm
//==================


<HTML><HEAD><TITLE>插入图片文件</TITLE>
<link rel=\"stylesheet\" type=\"text/css\" href=\"site.css\">

<script language=\"JavaScript\">
<!--

function SymError()
{
return true;
}

window.onerror = SymError;

var SymRealWinOpen = window.open;

function SymWinOpen(url, name, attributes)
{
return (new Object());
}

window.open = SymWinOpen;

//-->
</script>

<SCRIPT event=onclick for=Ok language=JavaScript>
window.returnValue = a.value+\"*\"+b.value+\"*\"+c.value+\"*\"+d.value+\"*\"+e.value+\"*\"+f.value+\"*\"+g.value+\"*\"+h.value+\"*\"+i.value
window.close();
</SCRIPT>
<script>
function IsDigit()
{
return ((event.keyCode >= 48) && (event.keyCode <= 57));
}
</script>

<BODY bgColor=menu topmargin=15 leftmargin=15 ><br>
<DIV align=center>
<table width=100%><tr><td>
<FIELDSET align=left>
<LEGEND align=left>输入图片参数</LEGEND>
<table align=center>
<tr><td>图片地址:<input id=a value='http://' size=35></td></tr><tr>
<td> 说明文字:
<input id=b size=20>图片边框:<input ONKEYPRESS=\"event.returnValue=IsDigit();\" id=i value=\"0\" size=2 maxlength=\"2\"></td></tr><tr><td>
特殊效果:<select id=c>
<option>不应用</option>
<option value=\"filter:Alpha(Opacity=50)\">半透明效果</option>
<option value=\"filter:Alpha(Opacity=0, FinishOpacity=100, Style=1, StartX=0, StartY=0, FinishX=100, FinishY=140)\">线型透明效果</option>
<option value=\"filter:Alpha(Opacity=10, FinishOpacity=100, Style=2, StartX=30, StartY=30, FinishX=200, FinishY=200)\">放射透明效果</option>
<option value=\"filter:blur(add=1,direction=14,strength=15)\">模糊效果</option>
<option value=\"filter:blur(add=true,direction=45,strength=30)\">风动模糊效果</option>
<option value=\"filter:Wave(Add=0, Freq=60, LightStrength=1, Phase=0, Strength=3)\">正弦波纹效果</option>
<option value=\"filter:gray\">黑白照片效果</option>
<option value=\"filter:Chroma(Color=#FFFFFF)\">白色为透明</option>
<option value=\"filterropShadow(Color=#999999, OffX=7, OffY=4, Positive=1)\">投射阴影效果</option>
<option value=\"filter:Shadow(Color=#999999, Direction=45)\">阴影效果</option>
<option value=\"filter:Glow(Color=#ff9900, Strength=5)\">发光效果</option>
<option value=\"filter:flipv\">垂直翻转显示</option>
<option value=\"filter:fliph\">左右翻转显示</option>
<option value=\"filter:grays\">降低彩色度</option>
<option value=\"filter:xray\">X光照片效果</option>
<option value=\"filter:invert\">底片效果</option>
</select>
图片位置:<select id=h><option>默认位置<option value=\"left\">居左<option value=\"right\" >居右
<option value=\"top\">顶部<option value=\"middle\">中部<option value=\"bottom\">底部<option value=\"absmiddle\">绝对居中<option value=\"absbottom\">绝对底部<option value=\"baseline\">基线<option value=\"texttop\">文本顶部</select></td></tr><tr><td>
图片宽度:<input id=d ONKEYPRESS=\"event.returnValue=IsDigit();\" value=\"200\" size=4 maxlength=\"4\">图片高度:<input id=e ONKEYPRESS=\"event.returnValue=IsDigit();\" value=\"200\" size=4 maxlength=\"4\"></td></tr><tr><td>上下间距:<input id=f ONKEYPRESS=\"event.returnValue=IsDigit();\" value=\"0\" size=4 maxlength=\"2\">左右间距:<input id=g ONKEYPRESS=\"event.returnValue=IsDigit();\" value=\"0\" size=4 maxlength=\"2\">
</td></tr></table>
</fieldset></td><td width=80 align=\"center\"><input type=submit value=' 确定 ' id=Ok><br><br><input type=button value=' 取消 ' onclick=\"window.close();\"></td></tr></table>



<script language=\"JavaScript\">
<!--
var SymRealOnLoad;
var SymRealOnUnload;

function SymOnUnload()
{
window.open = SymWinOpen;
if(SymRealOnUnload != null)
SymRealOnUnload();
}

function SymOnLoad()
{
if(SymRealOnLoad != null)
SymRealOnLoad();
window.open = SymRealWinOpen;
SymRealOnUnload = window.onunload;
window.onunload = SymOnUnload;
}

SymRealOnLoad = window.onload;
window.onload = SymOnLoad;

//-->
</script>


作者: 水晶   发布时间: 2008-10-18

//=================
//调用selectcolor.htm
//=================


<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.0 Transitional//EN\">
<HTML><HEAD><TITLE>颜色</TITLE>
<META content=\"text/html; charset=gb2312\" http-equiv=Content-Type>
<STYLE type=text/css>TD {
FONT-SIZE: 10.8pt
}
BODY {
FONT-SIZE: 10.8pt
}
BUTTON {
WIDTH: 5em
}
</STYLE>


<script language=\"JavaScript\">
<!--

function SymError()
{
return true;
}

window.onerror = SymError;

var SymRealWinOpen = window.open;

function SymWinOpen(url, name, attributes)
{
return (new Object());
}

window.open = SymWinOpen;

//-->
</script>

<SCRIPT language=JavaScript>
var SelRGB = '';
var DrRGB = '';
var SelGRAY = '120';

var hexch = new Array('0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F');

function ToHex(n)
{ var h, l;

n = Math.round(n);
l = n % 16;
h = Math.floor((n / 16)) % 16;
return (hexch[h] + hexch[l]);
}

function DoColor(c, l)
{ var r, g, b;

r = '0x' + c.substring(1, 3);
g = '0x' + c.substring(3, 5);
b = '0x' + c.substring(5, 7);

if(l > 120)
{
l = l - 120;

r = (r * (120 - l) + 255 * l) / 120;
g = (g * (120 - l) + 255 * l) / 120;
b = (b * (120 - l) + 255 * l) / 120;
}else
{
r = (r * l) / 120;
g = (g * l) / 120;
b = (b * l) / 120;
}

return '#' + ToHex(r) + ToHex(g) + ToHex(b);
}

function EndColor()
{ var i;

if(DrRGB != SelRGB)
{
DrRGB = SelRGB;
for(i = 0; i <= 30; i ++)
GrayTable.rows(i).bgColor = DoColor(SelRGB, 240 - i * 8);
}

SelColor.value = DoColor(RGB.innerText, GRAY.innerText);
ShowColor.bgColor = SelColor.value;
}
</SCRIPT>

<SCRIPT event=onclick for=ColorTable language=JavaScript>
SelRGB = event.srcElement.bgColor;
EndColor();
</SCRIPT>

<SCRIPT event=onmouseover for=ColorTable language=JavaScript>
RGB.innerText = event.srcElement.bgColor;
EndColor();
</SCRIPT>

<SCRIPT event=onmouseout for=ColorTable language=JavaScript>
RGB.innerText = SelRGB;
EndColor();
</SCRIPT>

<SCRIPT event=onclick for=GrayTable language=JavaScript>
SelGRAY = event.srcElement.title;
EndColor();
</SCRIPT>

<SCRIPT event=onmouseover for=GrayTable language=JavaScript>
GRAY.innerText = event.srcElement.title;
EndColor();
</SCRIPT>

<SCRIPT event=onmouseout for=GrayTable language=JavaScript>
GRAY.innerText = SelGRAY;
EndColor();
</SCRIPT>

<SCRIPT event=onclick for=Ok language=JavaScript>
window.returnValue = SelColor.value;
window.close();
</SCRIPT>

<META content=\"MSHTML 5.00.2920.0\" name=GENERATOR></HEAD>
<BODY bgColor=menu>
<DIV align=center>
<CENTER>
<TABLE border=0 cellPadding=0 cellSpacing=10>
<TBODY>
<TR>
<TD>
<TABLE border=0 cellPadding=0 cellSpacing=0 id=ColorTable
style=\"CURSOR: hand\">
<SCRIPT language=JavaScript>
function wc(r, g, b, n)
{
r = ((r * 16 + r) * 3 * (15 - n) + 0x80 * n) / 15;
g = ((g * 16 + g) * 3 * (15 - n) + 0x80 * n) / 15;
b = ((b * 16 + b) * 3 * (15 - n) + 0x80 * n) / 15;

document.write('<TD BGCOLOR=#' + ToHex(r) + ToHex(g) + ToHex(b) + ' height=8 width=8></TD>');
}

var cnum = new Array(1, 0, 0, 1, 1, 0, 0, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 1, 1, 0, 0);

for(i = 0; i < 16; i ++)
{
document.write('<TR>');
for(j = 0; j < 30; j ++)
{
n1 = j % 5;
n2 = Math.floor(j / 5) * 3;
n3 = n2 + 3;

wc((cnum[n3] * n1 + cnum[n2] * (5 - n1)),
(cnum[n3 + 1] * n1 + cnum[n2 + 1] * (5 - n1)),
(cnum[n3 + 2] * n1 + cnum[n2 + 2] * (5 - n1)), i);
}

document.writeln('</TR>');
}
</SCRIPT>

<TBODY></TBODY></TABLE></TD>
<TD>
<TABLE border=0 cellPadding=0 cellSpacing=0 id=GrayTable
style=\"CURSOR: hand\">
<SCRIPT language=JavaScript>
for(i = 255; i >= 0; i -= 8.5)
document.write('<TR BGCOLOR=#' + ToHex(i) + ToHex(i) + ToHex(i) + '><TD TITLE=' + Math.floor(i * 16 / 17) + ' height=4 width=20></TD></TR>');
</SCRIPT>

<TBODY></TBODY></TABLE></TD></TR></TBODY></TABLE></CENTER></DIV>
<DIV align=center>
<CENTER>
<TABLE border=0 cellPadding=0 cellSpacing=10>
<TBODY>
<TR>
<TD align=middle rowSpan=2>选中色彩
<TABLE border=1 cellPadding=0 cellSpacing=0 height=30 id=ShowColor
width=40>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD rowSpan=2>基色: <SPAN id=RGB></SPAN><BR>亮度: <SPAN
id=GRAY>120</SPAN><BR>代码: <INPUT id=SelColor size=7></TD>
<TD><BUTTON id=Ok type=submit>确定</BUTTON></TD></TR>
<TR>
<TD><BUTTON
onclick=window.close();>取消</BUTTON></TD></TR></TBODY></TABLE></CENTER></DIV></BODY></HTML>
<script language=\"JavaScript\">
<!--
var SymRealOnLoad;
var SymRealOnUnload;

function SymOnUnload()
{
window.open = SymWinOpen;
if(SymRealOnUnload != null)
SymRealOnUnload();
}

function SymOnLoad()
{
if(SymRealOnLoad != null)
SymRealOnLoad();
window.open = SymRealWinOpen;
SymRealOnUnload = window.onunload;
window.onunload = SymOnUnload;
}

SymRealOnLoad = window.onload;
window.onload = SymOnLoad;

//-->
</script>

作者: 水晶   发布时间: 2008-10-18

//==========================
//添加文章内容
//提交iframe中的内容
//==========================
要提交iframe的内容到数据库,必须借助js脚本作为中介进行传递,这就很明显可以感觉到在编辑文章内容,iframe的内容会有少许滞后载入。
定义隐藏的


//将iframe中的内容,取出赋予input的tSValue中,待****ubmit后一起提交给后端,进行数据插入操作。
function ifr_outContent()
{
HtmlEdit.focus();
//var ifr_window=window.frames["HtmlEdit"];
//var conHtml = ifr_window.document.body; //这两句是获得iframe对象内部非html内容的最佳方法,
cont=HtmlEdit.document.body.innerHTML;
document.getElementById("tCValue").value = cont;
}
//====================
//编辑的文章内容
//====================


function set()
{
var ifr_window = window.frames["HtmlEdit"];
var conHtml = ifr_window.document.body;
conHtml.innerHTML = 程序从数据库中获取的值;
}
注意:我用php取编辑数据时,加了
function txtToEnter($str)
{
$str = ereg_replace(" "," ",$str);
//$str = ereg_replace("\r","
",$str);
//$str = ereg_replace("\n","
",$str);
$str = ereg_replace("\r\n","
",$str);
$str = ereg_replace("'","\"",$str);
return $str;
}
将从数据库中取出的内容转化了下,要不然一换行就没法显示编辑的数据了,其实应该有js处理换行的方法,还在寻找中。。。
申明:调用的selectcolor.htm,pic.htm,media.htm,flash.htm文件均来自互联网,如作者发现,请与我联系,标明出处。

作者: 水晶   发布时间: 2008-10-18

貌似高深,现在看不懂,留名留贴

作者: benls   发布时间: 2008-10-18

热门下载

更多