开发一个自己的HTML在线编辑器（一）

核心提示： 有三个功能分别被称作onmouseover，onmouseup，开发一个自己的HTML在线编辑器（一）(3)，和onclick，Onmouseover触发函数ChangeImg()，它使用一个预先组合到一起的功能来直接在浏览器中操作页面的布局，注意，作用是当用户把鼠标放到图标上则改变所显示

有三个功能分别被称作onmouseover，onmouseup，和onclick。Onmouseover触发函数ChangeImg()，作用是当用户把鼠标放到图标上则改变所显示的图标的状态，这个函数需要两个参数（容器ID和新图标路径）。注意工具栏上的图标在web应用程序中被放置到“Images”文件夹下。

列表3

function ChangeImg(id, imgsrc)
{
　　var imgSrc = "Images/" + imgsrc;
　　document.getElementById(id).src = imgSrc;
}

Onmouseup函数的功能是用户的鼠标离开一个图标时，把这个图标该回其初始的状态，它需要3个参数（容器ID，新图标路径和1个变量）

列表4

function ReturnImg(id, imgsrc, ownVar)
{
　　if(ownVar == 'No')
　　{
　　　　var imgSrc = "Images/" + imgsrc;
　　　　document.getElementById(id).src = imgSrc;
　　}
}

第3个参数用来说明这个图标是否是被选中的状态，默认值是“No”。

单击图标后执行一个指定的动作，一个单独的javascript方法被调用，每一个动作都有标准的写法。

列表5

document.frames['HamHtmlEditor1_content'].document.execCommand('JustifyLeft',false,null);

使用上面这个方法可以使用户输入的文字居左。ExecCommand将在文档中执行一个命令。它使用一个预先组合到一起的功能来直接在浏览器中操作页面的布局。注意，只有在页面完全加载完毕后才能使用它。

列表6

function MakeBold(boldover, bold)
{
　　var img = document.getElementById('Bold')　　　
　　var imgBold = "Images/" + boldover
　　var imgNotBold = "Images/" + bold
　　img.src = imgBold;
　　　　　　　　　
　　if(imgStatusBold == 'Yes')
　　{
　　　　imgStatusBold='No';
　　　　img.src = "Images/" + bold;
　　}
　　else
　　{
　　　　imgStatusBold= 'Yes'
　　}
　　document.frames['HamHtmlEditor1_content'].document.execCommand('bold',false,null);
　　document.frames['HamHtmlEditor1_content'].focus();　　　　　　　　
}