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

核心提示： 我们创建了一个新的被称作UploadImages.aspx的webform，它来实现插入图片的特性，开发一个自己的HTML在线编辑器（二）(4)，当用户单击了插入图片的图标后，这个form被打开，并且这也是默认值列表6function insertsImage(imageurl,edito

我们创建了一个新的被称作UploadImages.aspx的webform，它来实现插入图片的特性。当用户单击了插入图片的图标后，这个form被打开，它允许用户从他/她的电脑内选择一个图片上传到服务器从而实现把图片插入到编辑器内的功能。这个webform还包括了两个文本框，用于让用户指定他/她上传图片后图片所显示的宽度和高度。当这个webform打开的时候显示如下

图3

用户已经可以浏览他/她的电脑选择一个图片并上传到服务器了，我们是在后置代码中处理文件上传的。我提供了一个选项，可以让管理员设置图片上传到服务器后所存放的目录。我将在后置代码的部分中详细解释这些。我们规定高度属性的最小值为100px，宽度属性的最小值为150px，并且这也是默认值

列表6

function insertsImage(imageurl,editorId,height,width)
{
　　opener.document.frames[editorId].focus();
　　　　　　
　　if(imageurl != "" | editorId!= "")
　　{
　　　　imageurl = unescape(imageurl);
　　　　var imageurl = imageurl + '"'　+ "width=" + width + "px" + " " + "height="+ height + "px";
　　
　　　　opener.document.frames[editorId].document.execCommand('InsertImage',false,imageurl);
　　}
　　opener.document.frames[editorId].focus();
}

当用户点击了插入图片后将调用这段函数。在这个单击事件中，我们上传了文件并且通过javascript把这个图片插入到编辑器中，显示的宽度和高度就是我们所指定的