HTML在线编辑器（HTML+js）

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>

结束！

HTML在线编辑器（HTML+js）相关推荐

图形化开发（一）——Three.js基本介绍-优缺点-在线编辑器 Babylon.JS是最好的JavaScript3D游戏引擎
图形化开发(一)--Three.js基本介绍-优缺点-在线编辑器 & Babylon.JS是最好的JavaScript3D游戏引擎课程主要学习目标 Threejs ( 3d ) D3 (做数 ...
HTML5在线编辑器Wysihtml5之Bootstrap扩展
为什么80%的码农都做不了架构师?>>> HTML5在线编辑器Wysihtml5之Bootstrap扩展 bootstrap扩展后的效果 Wysihtml5在线编辑器 boot ...
百度在线编辑器显示html,UEditor百度编辑器中JS/html代码（script标签）被过滤的解决办法...
作为一名程序员,在文章中经常会插入各种代码,大部分代码都不会发生问题,但div和script标签是经常会被使用到的. 而在之前的文章编写过程中,插入JS代码后,第一次文章会显示正常,而之后在后台编辑器 ...
JS设计“网页在线编辑器”
为扩充佳誉网站管理软件的实际功能,今天大致性的设计了一个所见即所得的网页在线编辑器,只做了个雏形出来,目前所能做的仅仅是在"编辑"状态下写入HTML代码,在"预览&quo ...
ASP.net：添加.net(2.0C#)FCKeditor在线编辑器步骤
1.下载本版本的编辑器压缩包.源码下载地址 2.解压缩打开文件夹拥有如下文件: 3.在VS中添加"选择项"加载在此文件夹的Bin下FredCK.FCKeditorV2.dll. 4 ...
自己开发的MarkDown在线编辑器越来越完善了，心里感到高兴。
先晒一下它的样子.当然,我一开始就企图做到这四点:随时随地可以自动保存草稿内容到服务器:键盘快捷键进行Markdown格式编辑:可以分段编辑(万一文章比较长呢):还有就是手机上也能用大部分功能.现在这 ...
基于ThinkPHP的在线编辑器调用
开源的在线编辑器有很多,比如FCKEditor,UEditor,Kindeditor等,调用方式也都大同小异下面列举UEditor在线编辑器插件在ThinkPHP里面的应用 1.Ueditor下载地 ...
5款非常好用的前端在线编辑器推荐
使用在线编辑器的好处: I 提供各种在线JS或css框架 II 实时预览代码效果 III 线上保存代码 IIII 可分享下面推荐几款很不错的在线前端编辑器 1.jsfiddle ...
tinyMce在线编辑器内JavaScript实现按Ctrl+S无刷新保存
以前也用过几个编辑器拉,如FCK,CUTEDTOR等,它们大都实现了很不错了的功能,也有丰富的插件使用.不过我还是觉得TinyMCE在线编辑器好用,它是采用纯JS客户端脚本技术构建,是一个轻量级加载速 ...
jquery插件课程2 放大镜、多文件上传和在线编辑器插件如何使用
jquery插件课程2 放大镜.多文件上传和在线编辑器插件如何使用一.总结一句话总结:插件使用真的还是比较简单的,引包,初始化,配置参数(json),配置数据(json),而后两步不是必须的.而且 ...

HTML在线编辑器（HTML+js）

HTML在线编辑器（HTML+js）相关推荐

最新文章

热门文章