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

分享于 

6分钟阅读

Web开发

  繁體

介绍

本文是以前介绍文章( 我为HTML编辑器编写的)的延续。 如果你还没有阅读的话,你可以先阅读。

HTML编辑器有内置的图像库或者"图像选取器",允许你上传和浏览服务器上的图像。 它支持一次上传单个图像( 通过 IFrame,你的页面从来不会刷新,因为它是通过 background 进程进行的)。 它还支持图像浏览器,可以浏览可能已经存储了服务器端的图像。 可以是存储在文件系统上的图像,也可以是存储在数据库中的图像。 这里外,如果你想在现有应用程序中提供图像选择器功能,则将图像选取器公开为单独的in。

在设计页面时,可以插入图像是一个非常有用的特性,在应用程序中提供丰富的文本编辑。 首先,让我们将 Jiffycms HTML编辑器的一个实例拖放到我们的页面。

drag drop editor

注意工具栏中的图像选取器 icon。 这个 icon 是将图像选择器打开到一个浮动 div,它类似于弹出窗口。 首先,让我们运行HTML编辑器并尝试启动图像选择器;这样,我们得到了一些工作。 在运行HTML编辑器之前,首先需要禁用 RequestValidation。 这是一个丰富的文本框,使用HTML作为输入,因这里只希望禁用这个页面的请求验证。

Make sure you disable ValidateRequest and add a script manager in the page

现在,让我们运行页面,然后点击图像选择器 icon,我们可以看到它的外观是什么:

image picker

如你所见,"浏览服务器"按钮按预期方式禁用。 毕竟,我们还没有告诉它应该浏览什么内容。 在左下角,你还可以看到一个上传图像按钮;让我们点击它。

上载图像将尝试在 background 中上载图像,而你将看到一个进度报告。

首先,让我们尝试处理图像上传。 我不想让这篇文章比它所需要的更复杂或者更复杂。 你应该已经有了一些关于 ASP.NET 中图像上传的知识或者经验,因为在这方面,不太。 本文中,我将上传到应用程序 root 中的映像文件夹。 你可能希望上载到应用程序 root (。你将不会产生文件更改通知) 之外的其他位置或者存储在你的数据库中。

因此,让我们在应用程序 root 中手动创建一个文件夹"图像"。

首先,让我们进入 ImageUploaded 事件处理程序。 这个处理程序每次通过文件上传器上传图像时都会触发。

ImageUploaded event handler

这就是我们的处理程序:

protectedvoid Editor1_ImageUploaded(object sender, UploadedImageFileEventArgs e)
{
}

现在,是时候编写一些代码来保存文件系统上的文件了。 不用说,你可以在任何地方保存。 注意事件处理程序 UploadedImageFileEventArgs 中的第二个参数。 此参数返回一个 HttpPostedFile 实例,该实例可以像这样访问: e.PostedImageFile 好的,让我们写一些代码针对它:

protectedvoid 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 :-)}

现在上传的图片都将保存在你的图片目录中,酷酷。 现在,如果能够浏览保存在服务器上的图像? 为了实现这里目的,Jiffycms HTML编辑器公开了 ImageGalleryNode 属性。 实际上,这是一个简单的围绕 TreeNode的包装器。 只需要枚举文件系统或者数据库上的图像,并且继续向它添加节点,如果有多个级别。

让我们看看一些代码:

protectedvoid Page_Load(object sender, EventArgs e)
{
 if (!IsPostBack)
 {
 //fill our image gallery with images browsable on the serverstring 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);
 }
 }
 }
}

我们现在已经添加了所有的图像,它们会在画廊中显示出来。

The image gallery

太完美了那很简单不是? !


图像  SET  EDI  Setting  gal  相册  
相关文章