htmleditor.htm
来自「javascript实现的 toolbar」· HTM 代码 · 共 217 行
HTM
217 行
<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>Toolbar1.0</TITLE>
<script language="JavaScript" src="toolbar.js"></script>
<script language="JavaScript">
var toolbar1 = new toolbar("toolbar1","",false,"buttonface",null,0,0,"","black",false);
var toolbar2 = new toolbar("toolbar2","",false,"buttonface",null,0,0,"","black",false);
//addNormalButton(image,title,text,disable,handle); 添加一个普通按钮
//addPressedButton(image,title,text,disable,status,handle); 添加一个下压按钮
//addTextButton(image,title,text,disable,length,currentValue,handle); 添加一个文本框按钮
//addSelectButton(image,title,text,disable,value,currentValue,handle); 添加一个选择按钮
var fontValue = new Array("宋体","新宋体","隶书","华文中宋","黑体","方正姚体","幼圆","华文行揩","华文新魏","Arial",
"Arial Black","Arial Narrow","Book Antiqua","Bookman Old Style","Brush Script MT","Century Gothic",
"Century Schoolbook","Comic Sans MS","Courier","Courier New","Fixedsys","Garamond","Georgia",
"Haettenschweiler", "Impact","Lucida Console","Lucida Sans Unicode","Marlett","Modern",
"Monotype Sorts","MS Sans Serif","MS Serif","Roman","Script","Small Fonts","Symbol","System",
"Tahoma","Terminal","Times New Roman","Trebuchet MS","Verdana","Webdings","Wingdings");
toolbar1.addTextButton("","标题","标题：",false,17,"",doTitle);
toolbar1.addSeparator();
toolbar1.addNormalButton("toolimage/img.gif","插入图象","",false,doInsertImg);
toolbar1.addPressedButton("toolimage/viewborder.gif","显示表格线","",false,1,doViewBorder);
toolbar1.addNormalButton("toolimage/undo.gif","撤销","",false,doUndo);
toolbar1.addNormalButton("toolimage/redo.gif","恢复","",false,doRedo);
toolbar1.addNormalButton("toolimage/delete.gif","删除","",false,doDelete);
toolbar1.addNormalButton("toolimage/help.gif","帮助","",false,doHelp);
toolbar2.addSelectButton("","","",false,fontValue,"宋体",doFontValue);
toolbar2.addSelectButton("","","",false,new Array(1,2,3,4,5,6,7),2,doFontSize);
toolbar2.addSeparator();
toolbar2.addPressedButton("toolimage/bold.gif","粗体","",false,1,doBold);
toolbar2.addPressedButton("toolimage/italic.gif","斜体","",false,1,doItalic);
toolbar2.addPressedButton("toolimage/under.gif","粗体","",false,1,doUnderLine);
toolbar2.addSeparator();
toolbar2.addNormalButton("toolimage/fgcolor.gif","文字颜色","",false,doFgColor);
toolbar2.addNormalButton("toolimage/bgcolor.gif","文字背景色","",false,doBgColor);
toolbar2.addNormalButton("toolimage/background.gif","背景色","",false,doBackGround);
toolbar2.addSeparator();
toolbar2.addPressedButton("toolimage/left.gif","居左","",false,1,doLeft);
toolbar2.addPressedButton("toolimage/center.gif","居中","",false,1,doCenter);
toolbar2.addPressedButton("toolimage/right.gif","居右","",false,1,doRight);
toolbar2.addSeparator();
toolbar2.addNormalButton("toolimage/deindent.gif","减少缩进量","",false,doDeIndent);
toolbar2.addNormalButton("toolimage/inindent.gif","增加缩进量","",false,doInIndent);
toolbar2.addSeparator();
toolbar2.addNormalButton("toolimage/filter.gif","选择页面切换效果","",false,doFilter);
function doTitle()
{
alert("doTitle");
}
function doUndo()
{
}
function doRedo()
{
}
function doDelete()
{
}
function doHelp()
{
}
function doFontValue()
{
alert("doFontValue");
}
function doFontSize()
{
alert("doFontSize");
}
function doInsertImg()
{
}
function doBold()
{
}
function doItalic()
{
}
function doUnderLine()
{
}
function doLeft()
{
}
function doCenter()
{
}
function doRight()
{
}
function doFgColor()
{
}
function doBgColor()
{
}
function doBackGround()
{
}
function doViewBorder()
{
}
function doDeIndent()
{
}
function doInIndent()
{
}
function doFilter()
{
}
</script>
</HEAD>
<BODY>
<table>
<tr><td><a href="http://www.oceanstudio.net"><img border="0" src="logo.jpg"></a></td></tr>
</table>
<br>
<div>
<script language="JavaScript">
toolbar1.draw();
</script>
</div>
<div>
<script language="JavaScript">
toolbar2.draw();
</script>
</div>
<hr width="50%" style="color: #FF0000">
<div style="text-align:center;font-size:9pt">copyright 2004 © 海洋工作室（<a href="mailto:ocean@forever.net.cn">ocean@forever.net.cn</a>）</div>
<pre>
/***************************************************************************************
* toolbar1.0
* 此代码版权归海洋工作室ocean所有，您可以自由的使用、复制、修改此代码，但需要
* 保留本工作室的版权信息。如果您修改了此代码，请将修改后的代码发回本工作室备案。
*
* 如果您对本程序有什么建议，请email to:ocean@forever.net.cn。
*
* 海洋工作室
* http://www.oceanstudio.net
* ocean(ocean@forever.net.cn) 制作
*****************************************************************************************/
这是最初写js时做的，大约在四年前了，不是很成熟，算不上什么精品代码。工具栏本身是可以拖动的，但是当时写的不熟练，所以拖动的代码有点问题。
工具栏类说明：
类：toolbar
构造函数：toolbar(id,title,ismove,bgcolor,bgimage,left,top,width,fgcolor,view)
公有属性：id 工具栏的id，必须在网页作用域内唯一，而且需要和工具栏实例名相同，string
buttons 工具栏的按钮数组，每一个元素都是一个button类的实例，button
title 工具栏的标题,string
ismove 是否允许工具栏可以拖动，boolean，允许拖动true，不允许拖动，false
bgcolor 工具栏的背景色，string
bgimage 工具栏的背景图片，string，如果为""或者null则表示不需要背景图片，string
left 工具栏的左上角横坐标，string or int
top 工具栏的左上角竖坐标，string or int
width 工具栏的宽度，如果为""则表示工具栏根据按钮的多少来得到宽度，string or int
height 工具栏的高度，工具栏默认高度22px
fgcolor 工具栏文字的眼色，string
view 工具栏的显示状态,boolean,为true时使用appendChild方法,为假时使用write方法
order 被触发的按钮在工具栏上的序号(从0开始计)
私有属性：drag 是否处于拖动状态，boolean，处于拖动状态true，不出于拖动状态false
bartx 拖动时用到的临时变量，int
barty 拖动时用到的临时变量，int
公有方法：
addNormalButton(image,title,text,disable,handle); 添加一个普通按钮
addPressedButton(image,title,text,disable,status,handle); 添加一个下压按钮
addTextButton(image,title,text,disable,length,currentValue,handle); 添加一个文本框按钮
addSelectButton(image,title,text,disable,value,currentValue,handle); 添加一个选择按钮
参数：image 按钮图片;title 按钮提示;text 按钮文字;disable 是否可用;handle 按钮点击后的处理函数引用;
status 按钮状态; length 文本按钮长度; value 选择按钮的可选值; currentValue 文本按钮或选择按钮的当前值
addSeparator(); 添加一个分隔条
draw(); 显示工具栏
deleteBar(); 删掉工具栏
disableButton(order,disable); 使按钮变为可用或不可用,order为按钮的序号，disable:boolean,为true时可用，为false时不可用
normalButton(order); 使按钮变为正常状态,order为按钮序号
pressedButton(order); 使按钮变为下压状态,order为按钮序号
raisedButton(order); 使按钮变为凸起状态,order为按钮序号
私有方法：
findChildren(eE, type, value); 从工具栏中寻找子元素，返回符合条件的子元素数组
makeGray(eE,b); 使按钮变暗或者变亮
getValue(); 得到文本框按钮或选择按钮的值，用于文本按钮和选择按钮的handle触发之前
initToolbar(); 初始化工具栏
doMouseDown(); 处理工具栏鼠标按下事件
doKeyDown(); 当在文本按钮中按下回车键后触发的事件
doMouseUp(); 处理工具栏鼠标抬起事件
doMouseOver(); 处理工具栏鼠标覆盖事件
doMouseMove(); 处理工具栏鼠标移动事件
doMouseOut(); 处理工具栏鼠标移出事件
全局变量：
crrT; 工具栏（toolbar）实例变量的引用
全局函数：
tgetReal(eE, type, value); 得到拥有type属性并且值为value的对象
getToolRef(eE); 得到工具栏实例的引用
button类：
共有属性：
type 按钮类别 int，1 普通； 2 下压； 3 文本； 4 选择； 5 分隔
image 按钮图片路径 string
title 按钮提示 string
text 按钮文字 string
disable 按钮是否有效 boolean， true 可用； false 不可用
status 按钮状态 int， 1 正常； 2 按下； 3 凸起；
value 选择按钮可以选择的值，是一个string数组
currentValue 文本按钮和选择按钮当前的值 string
handle 按钮被选中后调用的函数指针，按钮被选中是指普通按钮和下压按钮被点击、文本按钮失去焦点或回车键按下、选择按钮的选择值变更
注意：1 对于全局变量和全局函数，在网页作用域内不能重复。
2 toolbar.draw()方法必须在<body></body>之内调用。
3 对toolbar属性的更改必须在toolbar.draw()方法调用之前。
4 如果要指定document.onmousemove，请使用document.attachEvent()函数。
5 toolbar.draw()方法调用后，除非使用toolbar.deleteBar()方法，否则不能再调用toolbar.draw()方法
</pre>
</BODY>
</HTML>
⌨️ 快捷键说明
复制代码Ctrl + C
搜索代码Ctrl + F
全屏模式F11
增大字号Ctrl + =
减小字号Ctrl + -
显示快捷键?