HTML在线编辑器（HTML+js）

最新推荐文章于 2024-06-06 11:10:00 发布

379184514

最新推荐文章于 2024-06-06 11:10:00 发布

阅读量2.5k

点赞数 1

分类专栏： JavaScript/HTML 文章标签： html javascript class function button input

本文链接：https://blog.csdn.net/lin379184514/article/details/5308625

版权

JavaScript/HTML 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

http://download.csdn.net/source/2062506

参考了早期126邮件编辑器以及网上一些资料。图片资源主要来自网络。

代码部分只有一个html文件。其余为图标。

代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<META name=GENERATOR content="MSHTML 8.00.6001.18828">
</HEAD>
<STYLE type=text/css>
DIV A.n {PADDING: 2px; DISPLAY: block; COLOR: #000000; LINE-HEIGHT: 16px; HEIGHT: 16px; TEXT-DECORATION: none}
DIV A.n:hover {BACKGROUND: #e5e5e5}

.as1{margin:1px;border:2px solid #9EC9EC;background-color:#E5E8E8;font-size:12px;cursor:pointer;}
.as2{margin:1px;border:2px solid #E5E8E8;background-color:#E5E8E8;cursor:pointer;}
</STYLE>

<DIV id=fontface style="BORDER-RIGHT: #838383 1px solid; PADDING-RIGHT: 1px; BORDER-TOP: #838383 1px solid; DISPLAY: none; PADDING-LEFT: 1px; Z-INDEX: 99; BACKGROUND: #ffffff; LEFT: 2px; PADDING-BOTTOM: 1px; BORDER-LEFT: #838383 1px solid; WIDTH: 110px; PADDING-TOP: 1px; BORDER-BOTTOM: #838383 1px solid; POSITION: absolute; TOP: 35px; HEIGHT: 270px" οnkeydοwn='if(event.keyCode==27)this.style.display = "none"'>
<A class=n style="FONT: 12px '宋体'" onClick="format('fontname',this.innerHTML);this.parentNode.style.display='none'" href="javascript:void(0)">宋体</A>
<A class=n style="FONT: 12px '黑体'" onClick="format('fontname',this.innerHTML);this.parentNode.style.display='none'" href="javascript:void(0)">黑体</A>
<A class=n style="FONT: 12px '楷体'" onClick="format('fontname',this.innerHTML);this.parentNode.style.display='none'" href="javascript:void(0)">楷体</A>
<A class=n style="FONT: 12px '隶书'" onClick="format('fontname',this.innerHTML);this.parentNode.style.display='none'" href="javascript:void(0)">隶书</A>
<A class=n style="FONT: 12px '幼圆'" onClick="format('fontname',this.innerHTML);this.parentNode.style.display='none'" href="javascript:void(0)">幼圆</A>
<A class=n style="FONT: 12px Arial" onClick="format('fontname',this.innerHTML);this.parentNode.style.display='none'" href="javascript:void(0)">Arial</A>
<A class=n style="FONT: 12px 'Arial Narrow'"    onClick="format('fontname',this.innerHTML);this.parentNode.style.display='none'" href="javascript:void(0)">Arial Narrow</A>
<A class=n style="FONT: 12px 'Arial Black'"     onClick="format('fontname',this.innerHTML);this.parentNode.style.display='none'" href="javascript:void(0)">Arial Black</A>
<A class=n style="FONT: 12px 'Comic Sans MS'"   onClick="format('fontname',this.innerHTML);this.parentNode.style.display='none'" href="javascript:void(0)">Comic Sans MS</A>
<A class=n style="FONT: 12px Courier"           onClick="format('fontname',this.innerHTML);this.parentNode.style.display='none'" href="javascript:void(0)">Courier</A>
<A class=n style="FONT: 12px System"            onClick="format('fontname',this.innerHTML);this.parentNode.style.display='none'" href="javascript:void(0)">System</A>
<A class=n style="FONT: 12px 'Times New Roman'" onClick="format('fontname',this.innerHTML);this.parentNode.style.display='none'" href="javascript:void(0)">Times New Roman</A>
<A class=n style="FONT: 12px Verdana"           onClick="format('fontname',this.innerHTML);this.parentNode.style.display='none'" href="javascript:void(0)">Verdana</A>
</DIV>

<input style="display:none" type="button" value="imgsrc测试" onClick="imgsrc()">
<input style="display:none" type="button" value="载入2" onClick='jseval("document/.getElementById/(/"HtmlEditor/"/)/.src/=/"D/:00/.htm/"")'>
<input style="display:none" type="button" value="Html" onClick='alert(window.frames["HtmlEditor"].document.getElementsByTagName("html")[0].innerHTML);'>
<input style="display:none" type="button" value="imgURLs" onClick="getIframeImgURL()">
<input style="display:none" type="button" value="sourceEditor" onClick='alert(document.getElementById("sourceEditor").innerText)'>
<input style="display:none" type="button" value="HtmlEditor" onClick='alert(window.frames["HtmlEditor"].document.getElementsByTagName("BODY")[0].innerHTML)'>
</BODY>
<SCRIPT language="javascript">
function openfile(nn)
{
document.getElementById("HtmlEditor").src=nn;
}
var gSetColorType="";
function init()
{
window.frames["HtmlEditor"].document.write('<HTML><HEAD><TITLE>379184514</TITLE><style>body{padding-top:3px;padding-left:3px;padding-right:0px;margin:0px}p {margin:0;padding:0;}</style></HEAD><BODY></BODY></HTML>');
window.frames["HtmlEditor"].document.designMode="on";
}
init();
function format(type, para)
{
var f = window.frames["HtmlEditor"];
f.focus();
f.document.execCommand(type,false,para);
}
function setMode(bStatus)
{
var sourceEditor = document.getElementById("sourceEditor");
var HtmlEditor = document.getElementById("HtmlEditor");
var f = window.frames["HtmlEditor"];
var body = f.document.getElementsByTagName("BODY")[0];
if(bStatus)
{
    sourceEditor.style.display = "";
    HtmlEditor.style.display = "none";
    var cont =window.HtmlEditor.document.getElementsByTagName("html")[0].innerHTML;
    var url=location.href.substring(0,location.href.lastIndexOf("/")+1);
    //正则特殊字符，$( )*+.[]?/^{}|，如果目录中存在则正则表达式替换不能执行，目录中可能出现的特殊字符有$( )+.[]^{}
url=url.replace("//","").replace("/$","///$").replace("/(","///(").replace("/)","///)").replace("/+","///+").replace("/.","///.").replace("/[","///[").replace("/]","///]").replace("/^","///^").replace("/{","///{").replace("/}","///}");

    var r = new RegExp(url,"gi");
    cont= cont.replace(r,"");
    document.getElementById("sourceEditor").innerText=cont;
}
else
{
  sourceEditor.style.display = "none";
  HtmlEditor.style.display = "";
    body.innerHTML = sourceEditor.value;
}
}

function fDisplay(idDiv)
{
var idDiv =document.getElementById(idDiv);

var iX = window.event.clientX;
var iY = window.event.clientY;
idDiv.style.display = "";
idDiv.style.left = (iX-40) + "px";
idDiv.style.top = (iY-10) + "px";
idDiv.focus();
}

function createLink()
{
var sURL=window.prompt("输入链接地址", "");
if ((sURL!=null))format("CreateLink", sURL);
}

var i=0;
function test()
{
if(switchMode.checked == true)setMode(0);
temp = window.frames["HtmlEditor"].document.getElementsByTagName("html")[0].innerHTML;
testwin=open("","testwin","");
testwin.document.open();
testwin.document.write(temp);
testwin.document.close();
}
function saveFile()
{
if(switchMode.checked == true)setMode(0);
temp = window.frames["HtmlEditor"].document.getElementsByTagName("html")[0].innerHTML;
var win=window.open("","win","height=10, width=10,top=10,left=10,alwaysLowered=yes");
win.document.write(temp);
win.document.execCommand('SaveAs','','copy.htm');
win.close();
}

function CopyAll()
{
window.frames["HtmlEditor"].document.getElementsByTagName("BODY")[0].createTextRange().execCommand("Copy")
alert("复制成功!");
}

function selectAll()
{
window.frames["HtmlEditor"].document.getElementsByTagName("BODY")[0].createTextRange().select();
}

function reset()
{
window.frames["HtmlEditor"].document.getElementsByTagName("BODY")[0].innerHTML = "";
}

function code()
{
if(document.frames("HtmlEditor").document.selection && document.frames("HtmlEditor").document.selection.createRange)
{
    var f = window.frames["HtmlEditor"];
    f.focus();
    ss=document.frames("HtmlEditor").document.selection.createRange().htmlText;
    window.frames["HtmlEditor"].document.execCommand("InsertTextArea",false,"code"+i);

    ff=document.frames("HtmlEditor").document.getElementById("code"+i);
    ff.value=ss;
    ff.wrap="off";
    //ff.rows="6";
    //ff.style.height="100px";
    ff.style.width="90%";
    ff.style.background="#F2F1D7";
    ff.style.borderRight="1px #F3F8FC solid";
    ff.style.overflowY="visible";//自适应高度
    ff.readonly="true";

i++;
ff.focus();
}
}
function getalink(savefrom)
{
var alink=document.frames("HtmlEditor").document.getElementById("原始链接")
if(alink==null)HtmlEditor.document.body.innerHTML+='<br><A id=原始链接 TARGET="_blank">0</A>';
alink=document.frames("HtmlEditor").document.getElementById("原始链接")
alink.href=savefrom
alink.innerHTML='<FONT style="BACKGROUND-COLOR: #00ff00" color=#ff0033 size=5>原始链接:'+alink.href+"</FONT>"

// alert(alink.id);
// alert(alink.innerText.replace("原始链接:",""));
// alert(alink.href);
}
function getfile(filename)
{
var alink=document.frames("HtmlEditor").document.getElementById("相关文件")
if(alink==null)HtmlEditor.document.body.innerHTML+='<br><A id=相关文件 TARGET="_blank">0</A>';
alink=document.frames("HtmlEditor").document.getElementById("相关文件")
alink.href=filename
alink.innerHTML='<FONT style="BACKGROUND-COLOR: #000033"color=#ffff33><STRONG>相关文件:</STRONG></FONT><FONT color=#0000ff>'+alink.href+"</FONT>"

}
function jseval(x)
{
return eval(x);//返回值为x中的最后一行的结果。
}
function settitle(x)
{
window.frames["HtmlEditor"].document.title=x;
return window.frames["HtmlEditor"].document.getElementsByTagName("title")[0].innerHTML;
}

function edithtml()
{
return window.frames["HtmlEditor"].document.getElementsByTagName("html")[0].innerHTML;
}

function getIframeImgURL()
{
var imgs=document.frames("HtmlEditor").document.getElementsByTagName("img");
//var imgs = document.getElementsByTagName("img");
var imgURLs=new Array(imgs.length);
for(var i = 0;i<imgs.length;i++)
{
imgURLs[i] = imgs[i].src;//如果用document.getElementsByTagName("img")[i].src;每取一个图片地址就会对全部图片查找一次，这样效率比较低，还是储存在imgs中比较好！
}
//以上代码最好放在页面的最后面，或window.onload事件里，这样就不会因为页面没有全部加载完而没有全部读取到img元素
//alert(imgURLs);
return imgURLs.join(" ");
}
</SCRIPT>

结束！

379184514

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
HTML在线编辑器（HTML+js）

http://download.csdn.net/source/2062506 参考了早期126邮件编辑器以及网上一些资料。图片资源主要来自网络。代码部分只有一个html文件。其余为图标。代码如下： http://www.w3.org/1999/xhtml">DIV A.n {PADDING: 2px; DISPLAY: block; COLOR:
复制链接

扫一扫