我的简易HTML在线编辑器

最新推荐文章于 2021-06-03 06:20:09 发布

转载最新推荐文章于 2021-06-03 06:20:09 发布 · 177 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/ovliverlin/archive/2007/03/22/684083.html

文章标签：

#数据库 #javascript #php #ViewUI

本文介绍了一款自制的HTML在线编辑器，具备多种文本编辑功能，如字体样式调整、插入图片与视频等，并详细记录了实现过程及所用技术。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

年前年后一直忙得没完没了，这篇关于自己做的简单功能的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="<P>">普通</option>
        <option VALUE="<PRE>">已编排格式</option>
        <option VALUE="<H1>">标题一</option>
        <option VALUE="<H2>">标题二</option>
        <option VALUE="<H3>">标题三</option>
        <option VALUE="<H4>">标题四</option>
        <option VALUE="<H5>">标题五</option>
        <option VALUE="<H6>">标题六</option>
        <option VALUE="<H7>">标题七</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>

<!--

function SymError()

{

return true;

}

window.onerror = SymError;

var SymRealWinOpen = window.open;

function SymWinOpen(url, name, attributes)

{

return (new Object());

}

window.open = SymWinOpen;

//-->

</script>

window.returnValue = path.value+"*"+selrow.value+"*"+selcol.value

window.close();

</SCRIPT>

function IsDigit()

{

return ((event.keyCode >= 48) && (event.keyCode <= 57));

}

</script>

<LEGEND align=left>插入网上FLASH动画</LEGEND>

</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>

<!--

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

<!--

function SymError()

{

return true;

}

window.onerror = SymError;

var SymRealWinOpen = window.open;

function SymWinOpen(url, name, attributes)

{

return (new Object());

}

window.open = SymWinOpen;

//-->

</script>

window.returnValue = path.value+"*"+selrow.value+"*"+selcol.value

window.close();

</SCRIPT>

function IsDigit()

{

return ((event.keyCode >= 48) && (event.keyCode <= 57));

}

</script>

<LEGEND align=left>插入网上视频文件</LEGEND>

<TABLE>

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

<!--

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>

<!--

function SymError()

{

return true;

}

window.onerror = SymError;

var SymRealWinOpen = window.open;

function SymWinOpen(url, name, attributes)

{

return (new Object());

}

window.open = SymWinOpen;

//-->

</script>

window.returnValue = a.value+"*"+b.value+"*"+c.value+"*"+d.value+"*"+e.value+"*"+f.value+"*"+g.value+"*"+h.value+"*"+i.value

window.close();

</SCRIPT>

function IsDigit()

{

return ((event.keyCode >= 48) && (event.keyCode <= 57));

}

</script>

<LEGEND align=left>输入图片参数</LEGEND>

<td> 说明文字：

特殊效果：<select id=c>

<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=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:flipv">垂直翻转显示</option>

<option value="filter:fliph">左右翻转显示</option>

<option value="filter:grays">降低彩色度</option>

<option value="filter:xray">X光照片效果</option>

</select>

图片位置：<select id=h><option>默认位置<option value="left">居左<option value="right" >居右

图片宽度：<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>

<!--

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">

<STYLE type=text/css>TD

{

FONT-SIZE: 10.8pt

}

BODY

{

FONT-SIZE: 10.8pt

}

BUTTON

{

WIDTH: 5em

}

</STYLE>

<!--

function SymError()

{

return true;

}

window.onerror = SymError;

var SymRealWinOpen = window.open;

function SymWinOpen(url, name, attributes)

{

return (new Object());

}

window.open = SymWinOpen;

//-->

</script>

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>

SelRGB = event.srcElement.bgColor;

EndColor();

</SCRIPT>

RGB.innerText = event.srcElement.bgColor;

EndColor();

</SCRIPT>

RGB.innerText = SelRGB;

EndColor();

</SCRIPT>

SelGRAY = event.srcElement.title;

EndColor();

</SCRIPT>

GRAY.innerText = event.srcElement.title;

EndColor();

</SCRIPT>

GRAY.innerText = SelGRAY;

EndColor();

</SCRIPT>

window.returnValue = SelColor.value;

window.close();

</SCRIPT>

<TBODY>

<TR>

<TD>

<TABLE border=0 cellPadding=0 cellSpacing=0 id=ColorTable

style="CURSOR: hand">

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>

<TD>

<TABLE border=0 cellPadding=0 cellSpacing=0 id=GrayTable

style="CURSOR: hand">

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>

<TR>

<TD align=middle rowSpan=2>选中色彩

<TABLE border=1 cellPadding=0 cellSpacing=0 height=30 id=ShowColor

width=40>

<TBODY>

<TR>

<TD rowSpan=2>基色: <SPAN id=RGB></SPAN><BR>亮度: <SPAN

id=GRAY>120</SPAN><BR>代码: <INPUT id=SelColor size=7></TD>

<TR>

<TD><BUTTON

onclick=window.close();>取消</BUTTON></TD></TR></TBODY></TABLE></CENTER></DIV></BODY></HTML>

<!--

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的内容会有少许滞后载入。
定义隐藏的

//将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文件均来自互联网，如作者发现，请与我联系，标明出处。

转载于:https://www.cnblogs.com/ovliverlin/archive/2007/03/22/684083.html