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

核心提示： 图4后置代码这部分我们将了解如何在后置代码中实现上传图片的功能，并且将知道管理员如何设置图片上传的路径，开发一个自己的HTML在线编辑器（二）(5)，列表7public string FilePath{get{return _filePath;}set{_filePath = Server

图4

后置代码

这部分我们将了解如何在后置代码中实现上传图片的功能，并且将知道管理员如何设置图片上传的路径。

列表7

public string FilePath
{
　　get
　　{
　　　　return _filePath;
　　}
　　set
　　{
　　　　_filePath = Server.HtmlEncode(Request.ApplicationPath + value);
　　}
}

上面的这个string类型的属性用于让管理员设置图片上传的默认路径。接下来的列表将告诉你如何在你的webform中指定这个路径。

列表8

string imagePath = "/UserImages";
((hamHtmlEditor)this.FindControl("HamHtmlEditor1")).FilePath = imagePath;

列表9

public string Location
{
　　get
　　{
　　　　return _location;
　　}
　　set
　　{
　　　　_location = value;
　　}
}

为了使图片上传到web服务器后可以直接插入到编辑器里，我们需要使用上面这个属性，它用于获得编辑器的ID

列表10

if (heightValidator.IsValid && widthValidator.IsValid)
{
　　string elementToInsert = Request.QueryString["f"];
　　if(UploadImage.PostedFile != null && UploadImage.PostedFile.ContentLength > 0)
　　{
　　　　try
　　　　{
　　　　　　string fileName = System.IO.Path.GetFileName(UploadImage.PostedFile.FileName);
　　　　　　string fileLocation = Request.QueryString["path"] + "/" + fileName;
　　　　　　this.ImagePath = Server.HtmlEncode(fileLocation);
　　　　　　this.Location = elementToInsert;
　　　　　　Button1.Enabled = false;
　　　　　　UploadImage.PostedFile.SaveAs(Server.MapPath(fileLocation));
　　　　}
　　　　catch(Exception ex)
　　　　{
　　　　　　Response.Write("<script language=javascript>alert('"+ex.Message.ToString().Replace(@"",@"")+"');</script>");
　　　　}
　　　　finally
　　　　{
　　　　　　Button1.Enabled = true;
　　　　}
　　}
}

上面这段代码是写在插入图片按钮的点击事件里的。它的作用是上传图片到指定的路径，try catch块用于处理异常事件。

注意：有一个要非常注意的地方就是ASPNET（注：windows 2003 下是NETWORK SERVICE）用户是否有你的上传目录的写入权限。

列表11

public bool ShowHeader
{
　　get
　　{
　　　　return _Header;
　　}
　　set
　　{
　　　　_Header = value;
　　}
}

这是一个Boolean类型的属性。如果设置它为false则工具栏不会显示。

图5

当你把ShowHeader属性设置为false的时候编辑器显示如上。工具栏和其他的图标都将被隐藏。

图6

这就是增加了一个新的特性之后的编辑器的最终版本

结论

这个编辑器的版本只在IE中进行了测试。下一个版本中我将让它在更多的浏览器中工作。如果你有增强这个编辑器功能的建议或者提出其中的bug，我将非常欢迎。我也会把它封装成一个自定义控件，使你能更简单的使用它。希望你能从本文中获得一些有用的信息。