我的简易HTML在线编辑器

 

年前年后一直忙得没完没了，这篇关于自己做的简单功能的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("<b>"+sel.text+"</b>"); 
} 

如果只是几个功能还行，多个，难道写一堆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;P&gt;">普通</option>
        <option VALUE="&lt;PRE&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>

插入字体颜色、图片、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='clsid:D27CDB6E-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>

//=============
//调用的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="filter:DropShadow(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>

//=================
//调用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>

 

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

<form name="form1" method="post" id="getform" action="" onsubmit="ifr_outContent()" ></form>
<input type="hidden" name="tSValue" id="tSValue" value="">

//将iframe中的内容，取出赋予input的tSValue中，待onsubmit后一起提交给后端，进行数据插入操作。
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;
}

//====================
//编辑的文章内容
//====================
<form name="form1" method="post" id="getform" action="" onsubmit="ifr_outContent()" ></form>
<input type="hidden" name="tSValue" id="tSValue" value=程序从数据库中获取的值>

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","<br>",$str);
 //$str = ereg_replace("\n","<br>",$str);
 $str = ereg_replace("\r\n","<br>",$str);
 $str  = ereg_replace("'","\"",$str);
 return $str;
}
将从数据库中取出的内容转化了下，要不然一换行就没法显示编辑的数据了，其实应该有js处理换行的方法，还在寻找中。。。

 申明：调用的selectcolor.htm,pic.htm,media.htm,flash.htm文件均来自互联网，如作者发现，请与我联系，标明出处。