Question

我在ASP.NET WebPages（Razor）的Web应用程序中使用CKEditor。

我花了很多天试图弄清楚如何制作和集成基本文件管理器以支持将图像上传到CKEditor。该领域的文档几乎没用。 WebPages环境没有任何内容。很多PHP和WebForms以及MVC，但没有专门针对WebPages。

我终于想出了如何做到并在这里分享。

CK编辑器有一个可以添加到.Replace的属性，它告诉CKEditor添加＆＃34;上传＆＃34;选项卡（具有内置文件浏览器）到“图像属性”面板：

                CKEDITOR.replace('editor1'
                , {
                    filebrowserImageUploadUrl: 'imageUpload2'
                    }
                );

其中＆＃34; imageUpload2＆＃34;是包含上传逻辑的cshtml文件（imageUpload2.cshtml）的名称。添加 filebrowserImageUploadUrl 会导致CKEditor图像属性面板被修改（在新添加的＆＃34;上传＆＃34;菜单选项卡中）a＆＃34;浏览＆＃34;按钮和＆＃34;发送到服务器＆＃34;按钮。

＆＃34;浏览＆＃34;按钮激活CKEditor的内置文件浏览器，在html输入文件类型＆＃34;文件＆＃34;; ＆＃34;发送到服务器＆＃34;按钮执行您编码的文件管理器（见下文）。

程序将由用户：

单击CKEditor菜单中的Insert Image图标
点击＆＃34;上传＆＃34; “图像属性”对话框中的选项卡
点击＆＃34;浏览＆＃34;按钮浏览客户端计算机上的文件夹，然后选择（＆＃34;打开＆＃34;）所需的图像文件
点击＆＃34;发送到服务器＆＃34;按钮执行文件管理器的代码（imageUpload2.cshtml），将图像文件保存到cshtml文件中指定的文件夹，并将文件的url传递回CKEditor。

文件管理器中的代码很少 - 没有花里胡哨的东西：

@{
Layout = null; 
var context=HttpContext.Current;
HttpPostedFile uploads = context.Request.Files["upload"];

//get full filename
string file = System.IO.Path.GetFileName(uploads.FileName);
//get extension (including the period)
string ext = System.IO.Path.GetExtension(uploads.FileName);

//CKEditorFuncNum is passed in from the image propoerties panel in CKEditor
string CKEditorFuncNum = context.Request["CKEditorFuncNum"];

//use whatever folder name you prefer - make sure it has read/write permissions on the server
string url = Href("~/imageUploads/" + file);
var message = " .jpg .jpeg .gif .png ".Contains(ext.ToLower())?"":ext+" is invalid file type";


//Save file if it is one of the allowable extensions
if(String.IsNullOrEmpty(message))
{
    uploads.SaveAs(context.Server.MapPath(".") + url );
}

//create return javascript to CKEditor (must have <script></script> tags)
var responseFormat = "<script>window.parent.CKEDITOR.tools.callFunction({0}, \"{1}\", \"{2}\");</script>";
var responseText = String.Format(responseFormat, CKEditorFuncNum,   url, message);

//send script back to CKEditor image properties popup and close this page
context.Response.Write(responseText);
context.Response.End();            
}

我希望这可以节省别人浪费的时间，试图找出有效的方法。

ASP.NET中WebPages中CKEditor的基本图像上传器

0 个答案: