打造属于自己的可视Web HTML编辑器

最新推荐文章于 2021-06-11 13:18:16 发布

Snowdust

最新推荐文章于 2021-06-11 13:18:16 发布

阅读量3k

点赞数

分类专栏： HTML/DHTML/Javascript/CSS ASP Script 文章标签： html web microsoft border function input

本文链接：https://blog.csdn.net/Snowdust/article/details/523257

版权

本文介绍了如何使用HTML, CSS和JavaScript打造一个可视化的Web HTML编辑器，通过IFrame实现编辑功能，并利用document对象的designMode属性，以及execCommand()方法进行文本编辑、格式设置、插入图片等操作。此外，还讲解了如何处理用户选择、动态样式及事件响应，以创建类似FrontPage的编辑体验。" 97125121,8709154,福禄克DSX-5000 CableAnalyzer：高效电缆测试解决方案,"['信息工程', '网络测试仪', '综合布线', '福禄克', '电缆认证']

摘要由CSDN通过智能技术生成

一、基础工作

　　首先当然是收集常见的一些Button图片，比如Cut()，居中()，加粗()等，这不是一件难事，打开FrontPage 2000, 按下Print(屏蔽Copy)键，然后到Photoshop中Paste,将选择区域设置为固定大小(16*16),然后一个一个选择Cut,Ctrl+N(新建),Paste,Save optimizied即可，当然如果您找到直接的Gif文件，就不需要这样做。

　　只有字体色彩选择图片()和画笔的色彩选择图片()有一点技巧，为了能让用户选择了不同色彩时，相应的字体色彩(或者画笔色彩)的下方能出现相关的色彩，您可以将图片下方一小片区域Delete掉，这样下方即可形成透明色，然后将图片的背景色设置为需要的色彩即可，比如红色的字体色彩为，蓝色的即就为。而在Javascript则可用：图片的ID号.style.backgroundColor=Color 来实现。

　　另一个技巧便是怎样在Web中形成动态鼠标效果，如下：Mouse 不在对象上时： Mouse 移到对象上时： Mouse 在对象上压下时：

　　在Intranet中实现这样的方法非常多，有的采用捕获Mouse方法，有的采用多图片方法等等。在此，笔者则采用动态Css方法来实现，这样不仅简单，而且非常容易编写程序。

　　我们首先定义一组能产生Up,Dwon和正常效果的样式，如下：（以下的效果是在背景色为d0d0c8上产生的，若您的背景色不是，请修改rgb值即可)

　　再编写一个小函数，如下：（t表示某个td对象，n表示显示的效果，1=Up ,2=Down;其它表示正常)

function Check(t,n)
{
if(n==1) t.className ="Up"
else if(n==2) t.className ="Down" else t.className ="None"
}

　　那么在HTML中加入如下代码：<td class=None οnmοusedοwn=Check(this,2) οnmοuseοver="Check(this,1)" οnmοuseοut="Check(this,0)" οnmοuseup="Check(this,1)"></td>　即可大功告成。

　　以上所见的是一些基本工作，下面言归正传，真正开始我们的Visual Web HTML Editor之旅。

二、可视Web HTML Editor的实现方法

　　想在web页面中实现可视WebHTML Editor，是不能使用textarea对象的，因为它只能实现文本的输入。有一个非常好用的东东，那就是Iframe可以帮助我们来完成这功能（什么?IFrame？),是的，没错，就是Iframe.

　　将以下代码入放一个HTML文件中，然后用IE5.0打开它。

　　您会发现什么？

　　选中一些字符，按下Ctrl+B ，Ctrl+I,Ctrl+U ,再按下Ctrl+F，Ctrl+K.....Haha！Editor真正成了一个编辑器，而且是可视的。不要吓着了，您已经实现了您的Visual Web HTML Editor！（没有搞错吧？是的，没有错，您已经实现了您的Visual Web HTML Editor）。

　　这一切都应该归功于document对象的designModel属性.它表示当前的文档设计模式，黩认为"Off",表示文档不可编辑，但当您将其设置为"On"，即可成为可编辑的，因此您便像在FrontPage中使用它一样。

　　实现了编辑，我们只是完成了第一步，您还需要知道怎样为字体加色彩、加粗、设置大小，甚至插入图片、去掉格式等一系列功能。因此，我们还需要进一步来学习相关的这些知识。

　　一旦用户在文档中做了selection,您便可以使用下列的代码来访问它(selection.createRange()方法：从当前选择区中创建一个TextRange对象)。

edit = EditorID.document.selection.createRange();

　　那么： RangeType = Editor.document.selection.type;　即可表示用户选中的对象类别，如Text,Control等。如果您想在用户选择的区域为设计字体大小，字体色彩等功能，您还需要用到该对象的execCommand(）方法，它表示在给定选择区或上条命令：

语　法：

bSucces=object.execCommand(sCommand[,bUserInterface][,vVlaue])

参　数：

1.sCommand:必选项，表示要执行的命令。它可以是任何有效的命令标识符。更多的信息请参阅：
http://msdn.microsoft.com/workshop/author/dhtml/reference/commandids.asp

2.UseInterface 可选项。表明是否显示用户界面的值，如果支持的话。此值可为True或者fasle,黪认为false.

3.vValue 可选项，可分配的字符串、数值或者其它值，可能的值取决于sCommand.

返回值：

布尔值，若成功，返回true,否则返回false

注　释：

等待调用execCommand方法，直到而被加载之后。

因此如果您想加入将用户当前的选择的字体设置为"黑体",那么您需要做的工作如下：

edit = EditorID.document.selection.createRange();
edit.execCommande("FontName",false,"黑体");

　　而加入居中方式则为：

edit = EditorID.document.selection.createRange();
edit.execCommande("JustifyCenter"）即可。

　　但如果您想直接插入HTML代码，则需要用到pasteHTML()方法，比如您想插入一张图片http://www.i0713.net/images/logo/1.gif,则需要如下：

edit = EditorID.document.selection.createRange();
edit.pasteHTML("<img src='http://www.i0713.net/images/logo/1.gif'>");

当前如果你只想插入一段文字(比如：<img src='http://www.i0713.net/images/logo/1.gif'>），则可直接使用text属性，如：

edit = EditorID.document.selection.createRange();
edit.text="<img src='http://www.i0713.net/images/logo/1.gif'>";

三、源程序参考

　　以下即是我设计的"可视HTML编辑器"，它模仿了FrontPage的一些基本功能，IE打开它时，效果如下：

一旦您选择HTML模式，则：

而Preview模式为：

以下为可视HTML编辑的相关HTML代码：

　　而加入居中方式则为：

edit = EditorID.document.selection.createRange();
edit.execCommande("JustifyCenter"）即可。

　　但如果您想直接插入HTML代码，则需要用到pasteHTML()方法，比如您想插入一张图片http://www.i0713.net/images/logo/1.gif,则需要如下：

edit = EditorID.document.selection.createRange();
edit.pasteHTML("<img src='http://www.i0713.net/images/logo/1.gif'>");

当前如果你只想插入一段文字(比如：<img src='http://www.i0713.net/images/logo/1.gif'>），则可直接使用text属性，如：

edit = EditorID.document.selection.createRange();
edit.text="<img src='http://www.i0713.net/images/logo/1.gif'>";

三、源程序参考

　　以下即是我设计的"可视HTML编辑器"，它模仿了FrontPage的一些基本功能，IE打开它时，效果如下：

一旦您选择HTML模式，则：

而Preview模式为：

以下为可视HTML编辑的相关HTML代码：

　　而加入居中方式则为：

edit = EditorID.document.selection.createRange();
edit.execCommande("JustifyCenter"）即可。

　　但如果您想直接插入HTML代码，则需要用到pasteHTML()方法，比如您想插入一张图片http://www.i0713.net/images/logo/1.gif,则需要如下：

edit = EditorID.document.selection.createRange();
edit.pasteHTML("<img src='http://www.i0713.net/images/logo/1.gif'>");

当前如果你只想插入一段文字(比如：<img src='http://www.i0713.net/images/logo/1.gif'>），则可直接使用text属性，如：

edit = EditorID.document.selection.createRange();
edit.text="<img src='http://www.i0713.net/images/logo/1.gif'>";

三、源程序参考

　　以下即是我设计的"可视HTML编辑器"，它模仿了FrontPage的一些基本功能，IE打开它时，效果如下：

一旦您选择HTML模式，则：

而Preview模式为：

以下为可视HTML编辑的相关HTML代码：

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>可视HTML编辑器</title>
<style>
td,a,p,input,select {font-size:9pt;font-face:menu};

.Up{
border-left: 1Px solid rgb(233,244,249);
border-right: 1px solid rgb(12,12,12);
border-bottom: 1px solid rgb(12,12,12);
border-top: 1px solid rgb(233,244,249);
cursor:hand;
}
.Down
{ border-right: 1Px solid rgb(233,244,249);
border-left: 1px solid rgb(12,12,12);
border-top: 1px solid rgb(12,12,12);
border-bottom: 1px solid rgb(233,244,249);
cursor:hand;
}
.None{
border-top: 1Px solid rgb(208,208,200);
border-left: 1px solid rgb(208,208,200);
border-bottom: 1px solid rgb(208,208,200);
border-right: 1px solid rgb(208,208,200);
cursor:hand;}
</style>
<script language="JavaScript">

var Format = "Normal"; //当前的模式：Normal,Html,Preview
var initHTML = ""; //初始化的内容
var CssFile="";
var edit; //当前选择的文本编辑区域对象
var RangeType; //对象类别
var CssFile="";
var returnValue="";

function setFocus() {
Editor.focus();
}

function fixSize()
{
document.all.Editor.style.height = Math.max(document.body.clientHeight -
document.all.Editor.offsetTop, 0);
}

function selectRange(){
edit = Editor.document.selection.createRange();
RangeType = Editor.document.selection.type;
}

function execCommand(command,para) {
if (Format == "Normal"){
setFocus();
selectRange();
if ((command == "Undo") || (command == "Redo"))
document.execCommand(command);
else
if (para=="")
edit.execCommand(command);
else
edit.execCommand(command, false, arguments[1]);
Editor.focus();
if (RangeType != "Control") edit.select();
}
}

function pasteMark(Mark) //paste有标志
{
var strHTML;
if (Mark=='') return(0);
setFocus();
selectRange();
var t=Mark.split(" ");
if (Mark=="hr")
strHTML="<hr>"
else
strHTML = "<" + Mark + ">" + edit.text + "</" + t[0] + ">";
if (Format == "Normal")
edit.pasteHTML(strHTML);
else
edit.text=strHTML;
Editor.focus();
edit.select();
}

function pasteHTML(HTML) //直接paste内容
{
setFocus();
selectRange();
if (Format == "Normal")
edit.pasteHTML(HTML);
else
edit.text=HTML;
Editor.focus();
edit.select();
}

function initEditor(Model) {
Editor.document.designMode=Model;
Editor.document.open();
Editor.document.write(initHTML);
Editor.document.close();
initHTML = "";
if(CssFile!="")
Editor.document.createStyleSheet(CssFile);
Editor.document.body.style.fontFamily = "";
Editor.document.body.style.fontSize ="";
}

function Check(t,n)
{
if(n==1) t.className ="Up"
else
if(n==2) t.className ="Down"
else t.className ="None"
}

function InsertAttach()
{
alert("您选择了插入附件功能");
}

function InsertImage()
{
alert("您选择了插入图片功能");
}

function CheckOS()
{
if((window.navigator.userAgent.indexOf("IE 5") < 1) &&
(window.navigator.userAgent.indexOf("IE 6") < 1)) {
alert("请使用Microsoft Internet Explorer 5.0/n或更高版本的浏览器！");
window.close();
}
}

function SelectFormat(Status) //编辑模式的更改
{
swapModes(Status);
switch(Status) //需要更改的编辑模式
{ case "Normal":
Html.style.display="none";
Preview.style.display="none";
Normal.style.display="block";
break;
case "Html":
Normal.style.display="none";
Preview.style.display="none";
Html.style.display="block";
break;

default:
Normal.style.display="none";
Html.style.display="none";
Preview.style.display="block";
break;
}
return(false);
}

function showHelp()
{
showModalDialog("help.htm","","dialogWidth:350px;dialogHeight:250px;status:no;");
}

function addTable()
{ if(Format!="Preview")
{ ReturnValue=window.showModalDialog("AddTable.htm","",
"dialogWidth=310px;dialogHeight=150px;status=0");
if(ReturnValue && ReturnValue!="") pasteHTML(ReturnValue);
}
}

function doFormat(what,para,Mark) {
if(Format!="Preview")
if (Format=='Normal')
execCommand(what,para);
else
pasteMark(Mark);
}

function SelectColor(id)
{
var c=window.showModalDialog("SelectColor.htm",id.style.backgroundColor,
"dialogWidth=420px;dialogHeight=340px;status=0");
if(c && c!="")
id.style.backgroundColor=c;
}

</script>
</head>
<body SCROLL="no" bgcolor=d0d0c8 οnlοad="initEditor('ON');" leftmargin=5 topmargin=5>

<table width="100%" height="100%" cellSpacing="0" cellPadding="0">
<tr height=40>
<td>
<table cellSpacing="1" cellPadding="1" WIDTH=400>
<tr align=middle>
<td class=None οnmοusedοwn=Check(this,2) οnmοuseοver="Check(this,1)"
οnmοuseοut="Check(this,0)"
οnmοuseup="Check(this,1)" title="粗体" οnclick="doFormat('Bold','','b')">
<IMG src="../HTMLEditor/Images/B.gif" width="16" height="16"></td>
<td class=None οnmοusedοwn=Check(this,2) οnmοuseοver="Check(this,1)"
οnmοuseοut="Check(this,0)" οnmοuseup="Check(this,1)" title="斜体"
οnclick="doFormat('Italic','','i')">
<IMG src="../HTMLEditor/Images/I.gif" width="16" height="16"></td>
<td class=None οnmοusedοwn=Check(this,2) οnmοuseοver="Check(this,1)"
οnmοuseοut="Check(this,0)" οnmοuseup="Check(this,1)" title="下划线"
οnclick="doFormat('Underline','','u')"><IMG src="../HTMLEditor/Images/U.gif"
width="16" height="16"></td>
<td width="4"><IMG src="images/separator.gif" width="4" height="18"></td>
<td class=None οnmοusedοwn=Check(this,2) οnmοuseοver="Check(this,1)"
οnmοuseοut="Check(this,0)" οnmοuseup="Check(this,1)" title="撤销"
οnclick="doFormat('Undo','','')">
<IMG src="../HTMLEditor/Images/Undo.gif" width="16" height="16"></td>
<td class=None οnmοusedοwn=Check(this,2) οnmοuseοver="Check(this,1)"
οnmοuseοut="Check(this,0)" οnmοuseup="Check(this,1)" title="恢复"
οnclick="doFormat('Redo','','')"><IMG src="../HTMLEditor/Images/Redo.gif"
width="16" height="16"></td>
<td width="4"><IMG src="images/separator.gif" width="4" height="18"></td>
<td class=None οnmοusedοwn=Check(this,2) οnmοuseοver="Check(this,1)"
οnmοuseοut="Check(this,0)" οnmοuseup="Check(this,1)" title="左对齐"
οnclick="doFormat('JustifyLeft','','p align=left')"
><IMG src="../HTMLEditor/Images/Left.gif" width="16" height="16"></td>
<td class=None οnmοusedοwn=Check(this,2) οnmοuseοver="Check(this,1)"
οnmοuseοut="Check(this,0)" οnmοuseup="Check(this,1)" title="居中"
οnclick="doFormat('JustifyCenter','','p align=center')"
><IMG src="../HTMLEditor/Images/Center.gif" width="16" height="16"></td>
<td class=None οnmοusedοwn=Check(this,2) οnmοuseοver="Check(this,1)"
οnmοuseοut="Check(this,0)" οnmοuseup="Check(this,1)" title="右对齐"
οnclick="doFormat('JustifyRight','','p align=right')"
><IMG src="../HTMLEditor/Images/Right.gif" width="16" height="16"></td>
<td width="4"><IMG src="images/separator.gif" width="4" height="18"></td>
<td class=None οnmοusedοwn=Check(this,2) οnmοuseοver="Check(this,1)"

οnmοuseοut="Check(this,0)" οnmοuseup="Check(this,1)" title="剪切"
οnclick="doFormat('Cut','','')"><IMG src="../HTMLEditor/Images/Cut.gif"
width="16" height="16"></td>
<td class=None οnmοusedοwn=Check(this,2) οnmοuseοver="Check(this,1)"
οnmοuseοut="Check(this,0)" οnmοuseup="Check(this,1)" title="复制"
οnclick="doFormat('Copy','','')"><IMG src="../HTMLEditor/Images/Copy.gif"
width="16" height="16"></td>
<td class=None οnmοusedοwn=Check(this,2) οnmοuseοver="Check(this,1)"
οnmοuseοut="Check(this,0)" οnmοuseup="Check(this,1)" title="粘贴"
οnclick="doFormat('Paste','','')">
<IMG src="../HTMLEditor/Images/Paste.gif" width="16" height="16"></td>
<td class=None οnmοusedοwn=Check(this,2) οnmοuseοver="Check(this,1)"
οnmοuseοut="Check(this,0)" οnmοuseup="Check(this,1)" title="删除"
οnclick="doFormat('Delete','','')">
<IMG src="../HTMLEditor/Images/Delete.gif" width="16" height="16"></td>
<td width="4"><IMG src="images/separator.gif" width="4" height="18"></td>
<td class=None οnmοusedοwn=Check(this,2) οnmοuseοver="Check(this,1)"
οnmοuseοut="Check(this,0)" οnmοuseup="Check(this,1)" title="插入链结"
οnclick="doFormat('CreateLink','','')"><IMG src="../HTMLEditor/Images/Link.gif"
width="16" height="16"></td>
<td class=None οnmοusedοwn=Check(this,2) οnmοuseοver="Check(this,1)"
οnmοuseοut="Check(this,0)" οnmοuseup="Check(this,1)" title="添加附件"
οnclick="InsertAttach();"
><IMG src="../HTMLEditor/Images/UpFile.gif" width="16" height="16"></td>
<td class=None οnmοusedοwn=Check(this,2) οnmοuseοver="Check(this,1)"
οnmοuseοut="Check(this,0)" οnmοuseup="Check(this,1)" title="插入图片"
οnclick="InsertImage()"><IMG src="../HTMLEditor/Images/Image.gif" width="16" height="16"></td>
<td class=None οnmοusedοwn=Check(this,2) οnmοuseοver="Check(this,1)"
οnmοuseοut="Check(this,0)" οnmοuseup="Check(this,1)"
title="插入表格" οnclick="addTable()">
<IMG src="images/table.gif" width="16" height="16"></td>

<table cellSpacing="1" cellPadding="1" width="400">
<tr align=middle>
<td width="60">
<select id="select1" style="width: 60; height: 20"
οnchange="doSelectClick('FormatBlock',this,this.value);
this.returnValue=false;" name="select1" size="1">
<option selected value="">(标题)</option>
<option value="PRE">Pre<option value="H1">H1
<option value="H2">H2<option value="H3">H3
<option value="H4">H4<option value="H5">H5
<option value="H6">H6<option value="H7">H7
</select></td>
<td width="80">
<select style="width: 80; height: 20"
οnchange="doSelectClick('FontName',this,'font face=&quot'+this.value+'&quot')"
name="selectFontName"
size="1">
<option selected>(字体)</option>
<option value="Arial">Arial</option>
<option value="Arial Black">Arial Black</option>
<option value="Arial Narrow">Arial Narrow</option>
<option value="MS Outlook">MS Outlook</option>
<option value="宋体">宋体<option value="楷体_GB2312">楷体
<option value="隶书">隶书<option value="黑体">黑体
<option value="仿宋_GB2312">仿宋</option>
</select></td>
<td width="60"><select style="width: 60; height: 20"
οnchange="doSelectClick('FontSize',this,'font size='+this.value);"
name="selectFontSize" size="1">
<option selected>(大小)</option>
<option value="1">1<option value="2">2<option value="3">3
<option value="4">4<option value="5">5<option value="6">6
<option value="7">7</option></select></td>
<td width="80"><select id="OtherFormat"
style="width: 75; height: 20" οnchange="doSelectClick('FormatBlock',this,this.value);
this.returnValue=false;" size="1" name="selectFoontFormat">
<option selected>(格式)</option><option value="SUP">上标
<option value="SUB">下标<option value="DEL">删除线<option value="BIG">增大字体
<option value="SMALL">减小字体</option></select>
</td>
<td width="4"><IMG src="images/separator.gif" width="4" height="18"></td>
<td class=None οnmοusedοwn=Check(this,2) οnmοuseοver="Check(this,1)"
οnmοuseοut="Check(this,0)" οnmοuseup="Check(this,1)" title="减小缩进"
οnclick="doFormat('Outdent','','')" width="16"><IMG src="images/outdent.gif"
width="16" height="16"></td>
<td class=None οnmοusedοwn=Check(this,2) οnmοuseοver="Check(this,1)"
οnmοuseοut="Check(this,0)" οnmοuseup="Check(this,1)" title="增加缩进"
οnclick="doFormat('Indent','','BLOCKQUOTE')" width="16">
<IMG src="images/indent.gif" width="16" height="16"></td>
<td class=None οnmοusedοwn=Check(this,2) οnmοuseοver="Check(this,1)"
οnmοuseοut="Check(this,0)" οnmοuseup="Check(this,1)" title="插入水平线"
οnclick="doFormat('InsertHorizontalRule','','hr')" width="16" >
<IMG src="images/hr.gif" width="16" height="16"></td>
<td width="4"><IMG src="images/separator.gif" width="4" height="18"></td>
<td class=None οnmοusedοwn=Check(this,2) οnmοuseοver="Check(this,1)"
οnmοuseοut="Check(this,0)" οnmοuseup="Check(this,1)" title="编号"
οnclick="doFormat('FormatBlock','<OL>','ol')" width="16">
<IMG src="images/ol.gif" width="16" height="16"></td>
<td class=None οnmοusedοwn=Check(this,2) οnmοuseοver="Check(this,1)"
οnmοuseοut="Check(this,0)" οnmοuseup="Check(this,1)" title="项目符号"
οnclick="doFormat('FormatBlock','<UL>','ul')" width="16">
<IMG src="images/ul.gif" width="16" height="16"></td>

2.以下源程序将显示Help对话框：

<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft FrontPage 4.0">
<T99vLE>关于Web HTML Editor</T99vLE>
<style>td,a,p,input{font-size:9pt;font-face:menu}</style>
</HEAD>
<BODY bgcolor=#d0d0c8 οnlοad="bntOK.focus();">
<center>
<table width="300">
<tr>
<td width="220">

<P style="line-height: 200%"><font color="#FF0000">可视Web HTML编辑器测试版<br>
</font>　设计： <A href="mailto:dragon_jiang@163.net" target=_blank>Dragon Jiang</a><br>
　单位： <A href="http://soft.icchina.com" target=_blank>广州市爱喜软件有限公司</a><br>
　初稿： 2001年12月15日</P>
<p style="line-height: 150%"><font color="#FF0000">
使用技巧集锦：<br>
</font>　Ctrl+F：查找　Ctrl+K：超连接<br>
　Ctrl+B：加粗　Ctrl+I：斜体<br>
　Ctrl+X：剪切　Ctrl+U：下画线<br>
　Ctrl+C：复制　Ctrl+V：粘贴</p>
</td>
<td width="70" valign="top"><br>
<input ID=bntOK type="button" value="确定" name="bntOk"
οnclick="window.close();" style="width: 70; height: 21"><br>
</td>
</tr>
</table>
</center>
</BODY>
</HTML>

3. 插入表格对话框：

<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft FrontPage 4.0">
<T99vLE>插入表格</T99vLE>
<style> td,a,input,select{font-size:9pt}</style>
<script>
function Ok(control,Name,Min,Max)

最低0.47元/天解锁文章

Snowdust

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
打造属于自己的可视Web HTML编辑器

一、基础工作　　首先当然是收集常见的一些Button图片，比如Cut()，居中()，加粗()等，这不是一件难事，打开FrontPage 2000, 按下Print(屏蔽Copy)键，然后到Photoshop中Paste,将选择区域设置为固定大小(16*16),然后一个一个选择Cut,Ctrl+N(新建),Paste,Save optimizied即可，当然如果您找到直接的Gif文件，就不需要这样做
复制链接

扫一扫

专栏目录