在 Jiffycms HTML 编辑器中设置图像库

引言

本文是之前为 Jiffycms HTML 编辑器撰写的介绍性文章的延续。 如果您还没有阅读过，欢迎您先阅读该文章。

Jiffycms HTML 编辑器具有内置的图片库，或者更确切地说是一个“图片选择器”，它允许您上传和浏览服务器上的图像。 它支持一次上传单个图像（通过 IFrame，因此您的页面永远不会刷新，就像它通过后台进程发生一样）。 它还支持图像浏览器，可以浏览您可能存储在服务器端的图像。 这些可以是存储在文件系统中的图像，也可以是存储在数据库中的图像。 此外，图片选择器作为一个单独的 WebControl 公开，以防您想在现有应用程序中提供图片选择器功能。

在设计页面时能够插入图像是一个非常有用的功能，并且您几乎总是希望在使用应用程序中提供富文本编辑时使用它。 首先，让我们将 Jiffycms HTML 编辑器 的实例拖放到我们的页面上。

请注意工具栏中的图片选择器图标。 此图标会将图片选择器弹出一个浮动 div，使其类似于弹出窗口。 首先，让我们按原样运行 HTML 编辑器，然后尝试启动图片选择器； 这样，我们就对未来的工作有了一个了解。 在我们可以运行 HTML 编辑器之前，我们首先需要禁用 RequestValidation。 这是一个富文本框，它将 HTML 作为输入，因此您希望禁用此页面的请求验证是合乎逻辑的。

现在，让我们运行页面，然后单击图片选择器图标，我们可以亲自看看它的默认外观

正如您所看到的，“浏览服务器”按钮已禁用，正如预期的那样。 毕竟，我们还没有告诉它要浏览什么。 在左下方，您还可以看到一个上传图像按钮； 让我们点击它。

上传图像将尝试在后台上传图像，同时您会看到进度报告。

好的，所以首先，让我们尝试处理图像上传。 我不想让这篇文章比需要的更长或更复杂。 您应该已经具备在 ASP.NET 中处理图像上传的一些知识或经验，因为在这方面，并没有什么真正改变。 就本文而言，我将上传到应用程序根目录中的 *Images* 文件夹。 您可能想上传到应用程序根目录之外的其他位置（您不会产生文件更改通知）或存储在数据库中。

因此，让我们首先在我们的应用程序根目录中手动创建一个文件夹“*Images*”。

首先，让我们利用 ImageUploaded 事件处理程序。 每次通过文件上传器上传图像时，都会触发此处理程序。

瞧，这是我们的处理程序

protected void Editor1_ImageUploaded(object sender, UploadedImageFileEventArgs e)
{

}

现在，是时候编写一些代码将我们的文件保存在文件系统上了。 不用说，您可以将其保存在您喜欢的任何位置。 请注意事件处理程序 UploadedImageFileEventArgs 中的第二个参数。 此参数返回我们一个 HttpPostedFile 的实例，可以像这样访问：e.PostedImageFile。 好的，让我们针对它编写一些代码

protected void Editor1_ImageUploaded(object sender, UploadedImageFileEventArgs e)
{
    // specify the path on the server to
    // save the uploaded file to.
    string savePath = Server.MapPath(@"~\Images\");
    // Get the name of the file uploaded
    // and append it to the path.
    savePath += e.PostedImageFile.FileName;
    //now lets save the file stream
    e.PostedImageFile.SaveAs(savePath);
    //phew. That was easy. Now it's time to 
    //congratulate ourselves on a job well done :-)
}

您现在上传的任何图像都将保存在您的 *Images* 目录中，太棒了。 现在，如何浏览服务器上保存的图像？ 为了做到这一点，Jiffycms HTML 编辑器公开了一个 ImageGalleryNode 属性。 实际上，这是对 TreeNode 的一个简单包装器。 您只需要枚举文件系统或数据库中的图像，并不断向其添加节点，如果您有多个级别，则进行嵌套。

让我们看一些代码

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
    //fill our image gallery with images browsable on the server
        string imagesDirectoryPath = Server.MapPath(@"~/Images/");
        DirectoryInfo di = new DirectoryInfo(imagesDirectoryPath);
        if (di.Exists)
        {
            Editor1.ImageGalleryNode.Text = di.Name;//The folder
            //Now lets add all images to this parent node so
            //it seems like this : 
            /*
                - Images
                    - Image1.jpg
                    - Image2.jpg
             */
            FileInfo[] files = di.GetFiles();
            foreach (FileInfo file in files)
            {
                string pathToImageFile = ResolveUrl(
        string.Format(@"~/Images/{0}", file.Name));
                //create a new TreeNode
                ImagePickerTreeNode tr1 = 
        new ImagePickerTreeNode(file.Name, pathToImageFile);
                //add it to the root node, since we only have one folder
                Editor1.ImageGalleryNode.ChildNodes.Add(tr1);
            }
        }
    }
}

好了，现在我们已经添加了所有图像，它们将显示在图库中。

哦，太完美了！ 这很简单，不是吗？