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

核心提示： 上面的列表增加了一个img的HTML控件，它的onmouseover事件将调用一段javascript函数（我之前的文章已经对此解释过了），开发一个自己的HTML在线编辑器（二）(2)，以改变图片的选中状态，onclick事件将调用另一段javascript函数以得到选中的文本，它有两个参

上面的列表增加了一个img的HTML控件，它的onmouseover事件将调用一段javascript函数（我之前的文章已经对此解释过了），以改变图片的选中状态，onclick事件将调用另一段javascript函数以得到选中的文本，onmouseover将返回图片最初的状态。本次新增的功能除了插入图片外都将使用于此相同的概念。

请下载源码以查看所有的HTML标签是如何创建的

图1

javascript文件

这一部分我们将在已经创建好的javascript文件内增加一些新的功能，从而去处理这些新特性的事件。所有的这些功能都被定义到了这个javascript文件内，然后被编辑器引用

列表2

function Formats(style,editorId)
{
　　// 存储Iframe的id
　　var finalDivId = editorId + '_content';
　　　　　　　　　
　　// 设置焦点
　　document.frames[finalDivId].focus();
　　　　　　　　　
　　// 应用新的命令
　　document.frames[finalDivId].document.execCommand(style);
　　　　　　　　　
　　// 设置焦点
　　document.frames[finalDivId].focus();
}

本文所列的几乎所有的新增的事件处理都会使用上面的功能。它有两个参数：第一个参数是需要应用的命令，例如复制、粘贴之类的没；第二个参数是编辑器的id。我们使用一个相同的功能（execCommand）来应用这些变化。

列表3

function SetBorders(id)
{
　　// 设置onmouseover事件时表情图片的边框样式
　　var imgBorder = document.getElementById(id);
　　imgBorder.style.borderStyle = "solid";
　　imgBorder.style.borderWidth = "thin";
　　imgBorder.style.borderColor = "#688B9A";
}