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

一、基础工作

  首先当然是收集常见的一些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中加入如下代码: 即可大功告成。

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

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

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

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




id="EditorID" width="500" height="100">

  您会发现什么?

  选中一些字符,按下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("");

当前如果你只想插入一段文字(比如:),则可直接使用text属性,如:

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

三、源程序参考

  以下即是我设计的"可视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("");

当前如果你只想插入一段文字(比如:),则可直接使用text属性,如:

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

三、源程序参考

  以下即是我设计的"可视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("");

当前如果你只想插入一段文字(比如:),则可直接使用text属性,如:

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

三、源程序参考

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

一旦您选择HTML模式,则:

而Preview模式为:


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



可视HTML编辑器









































οnmοuseοut="Check(this,0)"
οnmοuseup="Check(this,1)" title="粗体" οnclick="doFormat('Bold','','b')">
οnmοuseοut="Check(this,0)" οnmοuseup="Check(this,1)" title="斜体"
 οnclick="doFormat('Italic','','i')">
οnmοuseοut="Check(this,0)" οnmοuseup="Check(this,1)" title="下划线"
οnclick="doFormat('Underline','','u')"> width="16" height="16">
οnmοuseοut="Check(this,0)" οnmοuseup="Check(this,1)" title="撤销"
οnclick="doFormat('Undo','','')">
οnmοuseοut="Check(this,0)" οnmοuseup="Check(this,1)" title="恢复"
οnclick="doFormat('Redo','','')"> width="16" height="16">
 οnmοuseοut="Check(this,0)" οnmοuseup="Check(this,1)" title="左对齐"
οnclick="doFormat('JustifyLeft','','p align=left')"
>
 οnmοuseοut="Check(this,0)" οnmοuseup="Check(this,1)" title="居中"
οnclick="doFormat('JustifyCenter','','p align=center')"
>
οnmοuseοut="Check(this,0)" οnmοuseup="Check(this,1)" title="右对齐"
οnclick="doFormat('JustifyRight','','p align=right')"
>

οnmοuseοut="Check(this,0)" οnmοuseup="Check(this,1)" title="剪切"
οnclick="doFormat('Cut','','')">width="16" height="16">

 οnmοuseοut="Check(this,0)" οnmοuseup="Check(this,1)" title="复制"
οnclick="doFormat('Copy','','')">width="16" height="16">
οnmοuseοut="Check(this,0)" οnmοuseup="Check(this,1)" title="粘贴"
οnclick="doFormat('Paste','','')">
 οnmοuseοut="Check(this,0)" οnmοuseup="Check(this,1)" title="删除"
 οnclick="doFormat('Delete','','')">
οnmοuseοut="Check(this,0)" οnmοuseup="Check(this,1)" title="插入链结"
οnclick="doFormat('CreateLink','','')">width="16" height="16">
 οnmοuseοut="Check(this,0)" οnmοuseup="Check(this,1)" title="添加附件"
οnclick="InsertAttach();"
>
οnmοuseοut="Check(this,0)" οnmοuseup="Check(this,1)" title="插入图片"
οnclick="InsertImage()">
οnmοuseοut="Check(this,0)" οnmοuseup="Check(this,1)"
title="插入表格" οnclick="addTable()">
 οnmοuseοut="Check(this,0)" οnmοuseup="Check(this,1)" title="背景颜色"
οnclick="doFormat('BackColor',bkcolorimg.style.backgroundColor+'',
'font style=BACKGROUND-COLOR:'+bkcolorimg.style.backgroundColor)"
width="18">src="images/colorpen.gif" width="16" height="16">
 οnmοuseοut="Check(this,0)" οnmοuseup="Check(this,1)" title="选择背景颜色"
style="FONT-WEIGHT: normal; FONT-SIZE: 5pt" οnclick="SelectColor(bkcolorimg)" width="7"
>▼
οnmοuseοut="Check(this,0)" οnmοuseup="Check(this,1)" title="字体颜色"
οnclick="doFormat('ForeColor',colorimg.style.backgroundColor+'',
'font color='+colorimg.style.backgroundColor)" width="18">
src="images/fontcolor.gif" width="16" height="16">
οnmοuseοut="Check(this,0)" οnmοuseup="Check(this,1)" title="选择字体颜色"
style="FONT-WEIGHT: normal;
FONT-SIZE: 5pt; LINE-HEIGHT: normal; FONT-STYLE: normal;
FONT-VARIANT: normal" οnclick="SelectColor(colorimg)" width="7">▼
 οnmοuseοut="Check(this,0)" οnmοuseup="Check(this,1)" title="帮助"
οnclick="showHelp()">



















οnmοuseοut="Check(this,0)" οnmοuseup="Check(this,1)" title="减小缩进"
 οnclick="doFormat('Outdent','','')" width="16">width="16" height="16">
οnmοuseοut="Check(this,0)" οnmοuseup="Check(this,1)" title="增加缩进"
 οnclick="doFormat('Indent','','BLOCKQUOTE')" width="16">
οnmοuseοut="Check(this,0)" οnmοuseup="Check(this,1)" title="插入水平线"
οnclick="doFormat('InsertHorizontalRule','','hr')" width="16" >
οnmοuseοut="Check(this,0)" οnmοuseup="Check(this,1)" title="编号"
 οnclick="doFormat('FormatBlock','
    ','ol')" width="16">
 οnmοuseοut="Check(this,0)" οnmοuseup="Check(this,1)" title="项目符号"
οnclick="doFormat('FormatBlock','
    ','ul')" width="16">
 οnmοuseοut="Check(this,0)" οnmοuseup="Check(this,1)" title="去除格式"
οnclick="doFormat('RemoveFormat','','')" width="16">























useMap=#Map border=0 width="135" height="15">
 border=0 width="24" height="15"> > border=0 width="19" height="15">




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




关于Web HTML Editor









可视Web HTML编辑器测试版

 设计: Dragon Jiang

 单位: 广州市爱喜软件有限公司

 初稿: 2001年12月15日



使用技巧集锦:

 Ctrl+F:查找 Ctrl+K:超连接

 Ctrl+B:加粗 Ctrl+I:斜体

 Ctrl+X:剪切 Ctrl+U:下画线

 Ctrl+C:复制 Ctrl+V:粘贴




οnclick="window.close();" style="width: 70; height: 21">




3. 插入表格对话框:




插入表格



































行数:

单元格边距:
style="width:35;height: 20" value="0">

type="button" name="bntOk" value="确认" οnclick="ClickOk();">
列数:

单元格间距:


 name="bntCancel" value="取消" onClick="ClickCancel();">
宽度:
style="width:35;height: 20" value="100">
边框:

     



4.色彩选择对话:




选择色彩值















 








style="width: 80; height: 21" οnclick="ClickOk();">

style="width: 80; height: 21" οnclick="ClickCancel();">


选中色彩




 

#C0C0D8


当前色彩




 

#C0C0D8


四、参考资料:

  1)http://msdn.microsoft.com;

   2)Microsoft Corporation 著 北京化中兴业展有限公司 译 人民邮电出版社 《动态HTML参考和开发应用大全》

四、参考资料:

  1)http://msdn.microsoft.com;

   2)Microsoft Corporation 著 北京化中兴业展有限公司 译 人民邮电出版社 《动态HTML参考和开发应用大全》

四、参考资料:

  1)http://msdn.microsoft.com;

   2)Microsoft Corporation 著 北京化中兴业展有限公司 译 人民邮电出版社 《动态HTML参考和开发应用大全》

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




关于Web HTML Editor









可视Web HTML编辑器测试版

 设计: Dragon Jiang

 单位: 广州市爱喜软件有限公司

 初稿: 2001年12月15日



使用技巧集锦:

 Ctrl+F:查找 Ctrl+K:超连接

 Ctrl+B:加粗 Ctrl+I:斜体

 Ctrl+X:剪切 Ctrl+U:下画线

 Ctrl+C:复制 Ctrl+V:粘贴




οnclick="window.close();" style="width: 70; height: 21">




3. 插入表格对话框:




插入表格



































行数:

单元格边距:
style="width:35;height: 20" value="0">

type="button" name="bntOk" value="确认" οnclick="ClickOk();">
列数:

单元格间距:


 name="bntCancel" value="取消" onClick="ClickCancel();">
宽度:
style="width:35;height: 20" value="100">
边框:

     



4.色彩选择对话:




选择色彩值















 








style="width: 80; height: 21" οnclick="ClickOk();">

style="width: 80; height: 21" οnclick="ClickCancel();">


选中色彩




 

#C0C0D8


当前色彩




 

#C0C0D8


四、参考资料:

  1)http://msdn.microsoft.com;

   2)Microsoft Corporation 著 北京化中兴业展有限公司 译 人民邮电出版社 《动态HTML参考和开发应用大全》

四、参考资料:

  1)http://msdn.microsoft.com;

   2)Microsoft Corporation 著 北京化中兴业展有限公司 译 人民邮电出版社 《动态HTML参考和开发应用大全》

四、参考资料:

  1)http://msdn.microsoft.com;

   2)Microsoft Corporation 著 北京化中兴业展有限公司 译 人民邮电出版社 《动态HTML参考和开发应用大全》

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




关于Web HTML Editor









可视Web HTML编辑器测试版

 设计: Dragon Jiang

 单位: 广州市爱喜软件有限公司

 初稿: 2001年12月15日



使用技巧集锦:

 Ctrl+F:查找 Ctrl+K:超连接

 Ctrl+B:加粗 Ctrl+I:斜体

 Ctrl+X:剪切 Ctrl+U:下画线

 Ctrl+C:复制 Ctrl+V:粘贴




οnclick="window.close();" style="width: 70; height: 21">




3. 插入表格对话框:




插入表格



































行数:

单元格边距:
style="width:35;height: 20" value="0">

type="button" name="bntOk" value="确认" οnclick="ClickOk();">
列数:

单元格间距:


 name="bntCancel" value="取消" onClick="ClickCancel();">
宽度:
style="width:35;height: 20" value="100">
边框:

     



4.色彩选择对话:




选择色彩值















 








style="width: 80; height: 21" οnclick="ClickOk();">

style="width: 80; height: 21" οnclick="ClickCancel();">


选中色彩




 

#C0C0D8


当前色彩




 

#C0C0D8


四、参考资料:

  1)http://msdn.microsoft.com;

   2)Microsoft Corporation 著 北京化中兴业展有限公司 译 人民邮电出版社 《动态HTML参考和开发应用大全》

四、参考资料:

  1)http://msdn.microsoft.com;

   2)Microsoft Corporation 著 北京化中兴业展有限公司 译 人民邮电出版社 《动态HTML参考和开发应用大全》

四、参考资料:

  1)http://msdn.microsoft.com;

   2)Microsoft Corporation 著 北京化中兴业展有限公司 译 人民邮电出版社 《动态HTML参考和开发应用大全》

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

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

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




id="EditorID" width="500" height="100">

  您会发现什么?

  选中一些字符,按下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("");

当前如果你只想插入一段文字(比如:),则可直接使用text属性,如:

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

三、源程序参考

  以下即是我设计的"可视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("");

当前如果你只想插入一段文字(比如:),则可直接使用text属性,如:

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

三、源程序参考

  以下即是我设计的"可视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("");

当前如果你只想插入一段文字(比如:),则可直接使用text属性,如:

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

三、源程序参考

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

一旦您选择HTML模式,则:

而Preview模式为:


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



可视HTML编辑器









































οnmοuseοut="Check(this,0)"
οnmοuseup="Check(this,1)" title="粗体" οnclick="doFormat('Bold','','b')">
οnmοuseοut="Check(this,0)" οnmοuseup="Check(this,1)" title="斜体"
 οnclick="doFormat('Italic','','i')">
οnmοuseοut="Check(this,0)" οnmοuseup="Check(this,1)" title="下划线"
οnclick="doFormat('Underline','','u')"> width="16" height="16">
οnmοuseοut="Check(this,0)" οnmοuseup="Check(this,1)" title="撤销"
οnclick="doFormat('Undo','','')">
οnmοuseοut="Check(this,0)" οnmοuseup="Check(this,1)" title="恢复"
οnclick="doFormat('Redo','','')"> width="16" height="16">
 οnmοuseοut="Check(this,0)" οnmοuseup="Check(this,1)" title="左对齐"
οnclick="doFormat('JustifyLeft','','p align=left')"
>
 οnmοuseοut="Check(this,0)" οnmοuseup="Check(this,1)" title="居中"
οnclick="doFormat('JustifyCenter','','p align=center')"
>
οnmοuseοut="Check(this,0)" οnmοuseup="Check(this,1)" title="右对齐"
οnclick="doFormat('JustifyRight','','p align=right')"
>

οnmοuseοut="Check(this,0)" οnmοuseup="Check(this,1)" title="剪切"
οnclick="doFormat('Cut','','')">width="16" height="16">

 οnmοuseοut="Check(this,0)" οnmοuseup="Check(this,1)" title="复制"
οnclick="doFormat('Copy','','')">width="16" height="16">
οnmοuseοut="Check(this,0)" οnmοuseup="Check(this,1)" title="粘贴"
οnclick="doFormat('Paste','','')">
 οnmοuseοut="Check(this,0)" οnmοuseup="Check(this,1)" title="删除"
 οnclick="doFormat('Delete','','')">
οnmοuseοut="Check(this,0)" οnmοuseup="Check(this,1)" title="插入链结"
οnclick="doFormat('CreateLink','','')">width="16" height="16">
 οnmοuseοut="Check(this,0)" οnmοuseup="Check(this,1)" title="添加附件"
οnclick="InsertAttach();"
>
οnmοuseοut="Check(this,0)" οnmοuseup="Check(this,1)" title="插入图片"
οnclick="InsertImage()">
οnmοuseοut="Check(this,0)" οnmοuseup="Check(this,1)"
title="插入表格" οnclick="addTable()">
 οnmοuseοut="Check(this,0)" οnmοuseup="Check(this,1)" title="背景颜色"
οnclick="doFormat('BackColor',bkcolorimg.style.backgroundColor+'',
'font style=BACKGROUND-COLOR:'+bkcolorimg.style.backgroundColor)"
width="18">src="images/colorpen.gif" width="16" height="16">
 οnmοuseοut="Check(this,0)" οnmοuseup="Check(this,1)" title="选择背景颜色"
style="FONT-WEIGHT: normal; FONT-SIZE: 5pt" οnclick="SelectColor(bkcolorimg)" width="7"
>▼
οnmοuseοut="Check(this,0)" οnmοuseup="Check(this,1)" title="字体颜色"
οnclick="doFormat('ForeColor',colorimg.style.backgroundColor+'',
'font color='+colorimg.style.backgroundColor)" width="18">
src="images/fontcolor.gif" width="16" height="16">
οnmοuseοut="Check(this,0)" οnmοuseup="Check(this,1)" title="选择字体颜色"
style="FONT-WEIGHT: normal;
FONT-SIZE: 5pt; LINE-HEIGHT: normal; FONT-STYLE: normal;
FONT-VARIANT: normal" οnclick="SelectColor(colorimg)" width="7">▼
 οnmοuseοut="Check(this,0)" οnmοuseup="Check(this,1)" title="帮助"
οnclick="showHelp()">



















οnmοuseοut="Check(this,0)" οnmοuseup="Check(this,1)" title="减小缩进"
 οnclick="doFormat('Outdent','','')" width="16">width="16" height="16">
οnmοuseοut="Check(this,0)" οnmοuseup="Check(this,1)" title="增加缩进"
 οnclick="doFormat('Indent','','BLOCKQUOTE')" width="16">
οnmοuseοut="Check(this,0)" οnmοuseup="Check(this,1)" title="插入水平线"
οnclick="doFormat('InsertHorizontalRule','','hr')" width="16" >
οnmοuseοut="Check(this,0)" οnmοuseup="Check(this,1)" title="编号"
 οnclick="doFormat('FormatBlock','
    ','ol')" width="16">
 οnmοuseοut="Check(this,0)" οnmοuseup="Check(this,1)" title="项目符号"
οnclick="doFormat('FormatBlock','
    ','ul')" width="16">
 οnmοuseοut="Check(this,0)" οnmοuseup="Check(this,1)" title="去除格式"
οnclick="doFormat('RemoveFormat','','')" width="16">























useMap=#Map border=0 width="135" height="15">
 border=0 width="24" height="15"> > border=0 width="19" height="15">




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




关于Web HTML Editor









可视Web HTML编辑器测试版

 设计: Dragon Jiang

 单位: 广州市爱喜软件有限公司

 初稿: 2001年12月15日



使用技巧集锦:

 Ctrl+F:查找 Ctrl+K:超连接

 Ctrl+B:加粗 Ctrl+I:斜体

 Ctrl+X:剪切 Ctrl+U:下画线

 Ctrl+C:复制 Ctrl+V:粘贴




οnclick="window.close();" style="width: 70; height: 21">




3. 插入表格对话框:




插入表格



































行数:

单元格边距:
style="width:35;height: 20" value="0">

type="button" name="bntOk" value="确认" οnclick="ClickOk();">
列数:

单元格间距:


 name="bntCancel" value="取消" onClick="ClickCancel();">
宽度:
style="width:35;height: 20" value="100">
边框:

     



4.色彩选择对话:




选择色彩值















 








style="width: 80; height: 21" οnclick="ClickOk();">

style="width: 80; height: 21" οnclick="ClickCancel();">


选中色彩




 

#C0C0D8


当前色彩




 

#C0C0D8


四、参考资料:

  1)http://msdn.microsoft.com;

   2)Microsoft Corporation 著 北京化中兴业展有限公司 译 人民邮电出版社 《动态HTML参考和开发应用大全》

四、参考资料:

  1)http://msdn.microsoft.com;

   2)Microsoft Corporation 著 北京化中兴业展有限公司 译 人民邮电出版社 《动态HTML参考和开发应用大全》

四、参考资料:

  1)http://msdn.microsoft.com;

   2)Microsoft Corporation 著 北京化中兴业展有限公司 译 人民邮电出版社 《动态HTML参考和开发应用大全》

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




关于Web HTML Editor









可视Web HTML编辑器测试版

 设计: Dragon Jiang

 单位: 广州市爱喜软件有限公司

 初稿: 2001年12月15日



使用技巧集锦:

 Ctrl+F:查找 Ctrl+K:超连接

 Ctrl+B:加粗 Ctrl+I:斜体

 Ctrl+X:剪切 Ctrl+U:下画线

 Ctrl+C:复制 Ctrl+V:粘贴




οnclick="window.close();" style="width: 70; height: 21">




3. 插入表格对话框:




插入表格



































行数:

单元格边距:
style="width:35;height: 20" value="0">

type="button" name="bntOk" value="确认" οnclick="ClickOk();">
列数:

单元格间距:


 name="bntCancel" value="取消" onClick="ClickCancel();">
宽度:
style="width:35;height: 20" value="100">
边框:

     



4.色彩选择对话:




选择色彩值















 








style="width: 80; height: 21" οnclick="ClickOk();">

style="width: 80; height: 21" οnclick="ClickCancel();">


选中色彩




 

#C0C0D8


当前色彩




 

#C0C0D8


四、参考资料:

  1)http://msdn.microsoft.com;

   2)Microsoft Corporation 著 北京化中兴业展有限公司 译 人民邮电出版社 《动态HTML参考和开发应用大全》

四、参考资料:

  1)http://msdn.microsoft.com;

   2)Microsoft Corporation 著 北京化中兴业展有限公司 译 人民邮电出版社 《动态HTML参考和开发应用大全》

四、参考资料:

  1)http://msdn.microsoft.com;

   2)Microsoft Corporation 著 北京化中兴业展有限公司 译 人民邮电出版社 《动态HTML参考和开发应用大全》

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




关于Web HTML Editor









可视Web HTML编辑器测试版

 设计: Dragon Jiang

 单位: 广州市爱喜软件有限公司

 初稿: 2001年12月15日



使用技巧集锦:

 Ctrl+F:查找 Ctrl+K:超连接

 Ctrl+B:加粗 Ctrl+I:斜体

 Ctrl+X:剪切 Ctrl+U:下画线

 Ctrl+C:复制 Ctrl+V:粘贴




οnclick="window.close();" style="width: 70; height: 21">




3. 插入表格对话框:




插入表格



































行数:

单元格边距:
style="width:35;height: 20" value="0">

type="button" name="bntOk" value="确认" οnclick="ClickOk();">
列数:

单元格间距:


 name="bntCancel" value="取消" onClick="ClickCancel();">
宽度:
style="width:35;height: 20" value="100">
边框:

     



4.色彩选择对话:




选择色彩值















 








style="width: 80; height: 21" οnclick="ClickOk();">

style="width: 80; height: 21" οnclick="ClickCancel();">


选中色彩




 

#C0C0D8


当前色彩




 

#C0C0D8


四、参考资料:

  1)http://msdn.microsoft.com;

   2)Microsoft Corporation 著 北京化中兴业展有限公司 译 人民邮电出版社 《动态HTML参考和开发应用大全》

四、参考资料:

  1)http://msdn.microsoft.com;

   2)Microsoft Corporation 著 北京化中兴业展有限公司 译 人民邮电出版社 《动态HTML参考和开发应用大全》

四、参考资料:

  1)http://msdn.microsoft.com;

   2)Microsoft Corporation 著 北京化中兴业展有限公司 译 人民邮电出版社 《动态HTML参考和开发应用大全》

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

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

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




id="EditorID" width="500" height="100">

  您会发现什么?

  选中一些字符,按下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("");

当前如果你只想插入一段文字(比如:),则可直接使用text属性,如:

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

三、源程序参考

  以下即是我设计的"可视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("");

当前如果你只想插入一段文字(比如:),则可直接使用text属性,如:

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

三、源程序参考

  以下即是我设计的"可视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("");

当前如果你只想插入一段文字(比如:),则可直接使用text属性,如:

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

三、源程序参考

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

一旦您选择HTML模式,则:

而Preview模式为:


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



可视HTML编辑器









































οnmοuseοut="Check(this,0)"
οnmοuseup="Check(this,1)" title="粗体" οnclick="doFormat('Bold','','b')">
οnmοuseοut="Check(this,0)" οnmοuseup="Check(this,1)" title="斜体"
 οnclick="doFormat('Italic','','i')">
οnmοuseοut="Check(this,0)" οnmοuseup="Check(this,1)" title="下划线"
οnclick="doFormat('Underline','','u')"> width="16" height="16">
οnmοuseοut="Check(this,0)" οnmοuseup="Check(this,1)" title="撤销"
οnclick="doFormat('Undo','','')">
οnmοuseοut="Check(this,0)" οnmοuseup="Check(this,1)" title="恢复"
οnclick="doFormat('Redo','','')"> width="16" height="16">
 οnmοuseοut="Check(this,0)" οnmοuseup="Check(this,1)" title="左对齐"
οnclick="doFormat('JustifyLeft','','p align=left')"
>
 οnmοuseοut="Check(this,0)" οnmοuseup="Check(this,1)" title="居中"
οnclick="doFormat('JustifyCenter','','p align=center')"
>
οnmοuseοut="Check(this,0)" οnmοuseup="Check(this,1)" title="右对齐"
οnclick="doFormat('JustifyRight','','p align=right')"
>

οnmοuseοut="Check(this,0)" οnmοuseup="Check(this,1)" title="剪切"
οnclick="doFormat('Cut','','')">width="16" height="16">

 οnmοuseοut="Check(this,0)" οnmοuseup="Check(this,1)" title="复制"
οnclick="doFormat('Copy','','')">width="16" height="16">
οnmοuseοut="Check(this,0)" οnmοuseup="Check(this,1)" title="粘贴"
οnclick="doFormat('Paste','','')">
 οnmοuseοut="Check(this,0)" οnmοuseup="Check(this,1)" title="删除"
 οnclick="doFormat('Delete','','')">
οnmοuseοut="Check(this,0)" οnmοuseup="Check(this,1)" title="插入链结"
οnclick="doFormat('CreateLink','','')">width="16" height="16">
 οnmοuseοut="Check(this,0)" οnmοuseup="Check(this,1)" title="添加附件"
οnclick="InsertAttach();"
>
οnmοuseοut="Check(this,0)" οnmοuseup="Check(this,1)" title="插入图片"
οnclick="InsertImage()">
οnmοuseοut="Check(this,0)" οnmοuseup="Check(this,1)"
title="插入表格" οnclick="addTable()">
 οnmοuseοut="Check(this,0)" οnmοuseup="Check(this,1)" title="背景颜色"
οnclick="doFormat('BackColor',bkcolorimg.style.backgroundColor+'',
'font style=BACKGROUND-COLOR:'+bkcolorimg.style.backgroundColor)"
width="18">src="images/colorpen.gif" width="16" height="16">
 οnmοuseοut="Check(this,0)" οnmοuseup="Check(this,1)" title="选择背景颜色"
style="FONT-WEIGHT: normal; FONT-SIZE: 5pt" οnclick="SelectColor(bkcolorimg)" width="7"
>▼
οnmοuseοut="Check(this,0)" οnmοuseup="Check(this,1)" title="字体颜色"
οnclick="doFormat('ForeColor',colorimg.style.backgroundColor+'',
'font color='+colorimg.style.backgroundColor)" width="18">
src="images/fontcolor.gif" width="16" height="16">
οnmοuseοut="Check(this,0)" οnmοuseup="Check(this,1)" title="选择字体颜色"
style="FONT-WEIGHT: normal;
FONT-SIZE: 5pt; LINE-HEIGHT: normal; FONT-STYLE: normal;
FONT-VARIANT: normal" οnclick="SelectColor(colorimg)" width="7">▼
 οnmοuseοut="Check(this,0)" οnmοuseup="Check(this,1)" title="帮助"
οnclick="showHelp()">



















οnmοuseοut="Check(this,0)" οnmοuseup="Check(this,1)" title="减小缩进"
 οnclick="doFormat('Outdent','','')" width="16">width="16" height="16">
οnmοuseοut="Check(this,0)" οnmοuseup="Check(this,1)" title="增加缩进"
 οnclick="doFormat('Indent','','BLOCKQUOTE')" width="16">
οnmοuseοut="Check(this,0)" οnmοuseup="Check(this,1)" title="插入水平线"
οnclick="doFormat('InsertHorizontalRule','','hr')" width="16" >
οnmοuseοut="Check(this,0)" οnmοuseup="Check(this,1)" title="编号"
 οnclick="doFormat('FormatBlock','
    ','ol')" width="16">
 οnmοuseοut="Check(this,0)" οnmοuseup="Check(this,1)" title="项目符号"
οnclick="doFormat('FormatBlock','
    ','ul')" width="16">
 οnmοuseοut="Check(this,0)" οnmοuseup="Check(this,1)" title="去除格式"
οnclick="doFormat('RemoveFormat','','')" width="16">























useMap=#Map border=0 width="135" height="15">
 border=0 width="24" height="15"> > border=0 width="19" height="15">




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




关于Web HTML Editor









可视Web HTML编辑器测试版

 设计: Dragon Jiang

 单位: 广州市爱喜软件有限公司

 初稿: 2001年12月15日



使用技巧集锦:

 Ctrl+F:查找 Ctrl+K:超连接

 Ctrl+B:加粗 Ctrl+I:斜体

 Ctrl+X:剪切 Ctrl+U:下画线

 Ctrl+C:复制 Ctrl+V:粘贴




οnclick="window.close();" style="width: 70; height: 21">




3. 插入表格对话框:




插入表格



































行数:

单元格边距:
style="width:35;height: 20" value="0">

type="button" name="bntOk" value="确认" οnclick="ClickOk();">
列数:

单元格间距:


 name="bntCancel" value="取消" onClick="ClickCancel();">
宽度:
style="width:35;height: 20" value="100">
边框:

     



4.色彩选择对话:




选择色彩值















 








style="width: 80; height: 21" οnclick="ClickOk();">

style="width: 80; height: 21" οnclick="ClickCancel();">


选中色彩




 

#C0C0D8


当前色彩




 

#C0C0D8


四、参考资料:

  1)http://msdn.microsoft.com;

   2)Microsoft Corporation 著 北京化中兴业展有限公司 译 人民邮电出版社 《动态HTML参考和开发应用大全》

四、参考资料:

  1)http://msdn.microsoft.com;

   2)Microsoft Corporation 著 北京化中兴业展有限公司 译 人民邮电出版社 《动态HTML参考和开发应用大全》

四、参考资料:

  1)http://msdn.microsoft.com;

   2)Microsoft Corporation 著 北京化中兴业展有限公司 译 人民邮电出版社 《动态HTML参考和开发应用大全》

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




关于Web HTML Editor









可视Web HTML编辑器测试版

 设计: Dragon Jiang

 单位: 广州市爱喜软件有限公司

 初稿: 2001年12月15日



使用技巧集锦:

 Ctrl+F:查找 Ctrl+K:超连接

 Ctrl+B:加粗 Ctrl+I:斜体

 Ctrl+X:剪切 Ctrl+U:下画线

 Ctrl+C:复制 Ctrl+V:粘贴




οnclick="window.close();" style="width: 70; height: 21">




3. 插入表格对话框:




插入表格



































行数:

单元格边距:
style="width:35;height: 20" value="0">

type="button" name="bntOk" value="确认" οnclick="ClickOk();">
列数:

单元格间距:


 name="bntCancel" value="取消" onClick="ClickCancel();">
宽度:
style="width:35;height: 20" value="100">
边框:

     



4.色彩选择对话:




选择色彩值















 








style="width: 80; height: 21" οnclick="ClickOk();">

style="width: 80; height: 21" οnclick="ClickCancel();">


选中色彩




 

#C0C0D8


当前色彩




 

#C0C0D8


四、参考资料:

  1)http://msdn.microsoft.com;

   2)Microsoft Corporation 著 北京化中兴业展有限公司 译 人民邮电出版社 《动态HTML参考和开发应用大全》

四、参考资料:

  1)http://msdn.microsoft.com;

   2)Microsoft Corporation 著 北京化中兴业展有限公司 译 人民邮电出版社 《动态HTML参考和开发应用大全》

四、参考资料:

  1)http://msdn.microsoft.com;

   2)Microsoft Corporation 著 北京化中兴业展有限公司 译 人民邮电出版社 《动态HTML参考和开发应用大全》

你可能感兴趣的:(ASP,Script)