用于CKEditor的ASP.NET MVC Image Uploader？-Java 学习之路

我们的管理网站上有一个 textarea 使用CKEditor 4.4，用户可以在其中编辑内容 . 他们希望能够从他们的计算机添加图像，并将它们自动上传到服务器进行托管 .

我见过a number of image upload scripts for CKEditor，但它们都带有PHP后端 . ASP.NET MVC 4是否存在？

我见过this post和this one，它们显示了WebForms的服务器端控件，但是还没能找到我们可以插入的MVC版本，或者根据我们的口味修改 .

我唯一的选择是使用现有的PHP插件之一并将 endpoints 重写为ASP.NET MVC吗？

谢谢 .

4 回答

1
该插件将图像异步发送到服务器 . 只要你有一个ASP.NET MVC / Web Api endpoints 来接受图像并将其保存到相关位置/更新相关表，你应该是好的 . 确保返回插件所期望的数据 .

例如，从您提供的演示页面，PHP服务器页面在成功上载图像时返回以下字符串
```
<script type="text/javascript">
    window.parent.CKEDITOR.tools.callFunction("92", "\/userfiles\/images\/myImgy.jpg", "");
</script>
```
在Web api endpoints 中，您可以使用 HttpContext.Current.Request.Files 集合来查找已发布的文件 .
回复于 2024-05-06T02:14:52+08:00
1

这些不完全是MVC示例，但您可以在VB.Net和C＃中找到一个示例来处理来自CKEditor的上传：https://github.com/AlfonsoML/CKEditorUploader

选择所需的代码并将其调整到CMS .

回复于 2024-05-06T02:14:52+08:00

根据接受的答案中提到的Alfonso的WebForms代码，我最终在MVC中使用了类似于此的脚本：

using System.Web;
using System.Web.Mvc;

namespace WebApplication1.Controllers
{
    public class CKEditorController : Controller
    {
        const string basePath = @"D:\CKFinder\ckfinder\userfiles\";
        const string baseUrl = @"/ckfinder/userfiles/";

        const string scriptTag = "<script type='text/javascript'>window.parent.CKEDITOR.tools.callFunction({0}, '{1}', '{2}')</script>";

        public ActionResult Index()
        {
            var funcNum = 0;
            int.TryParse(Request["CKEditorFuncNum"], out funcNum);

            if (Request.Files == null || Request.Files.Count < 1)
                return BuildReturnScript(funcNum, null, "No file has been sent");

            if (!System.IO.Directory.Exists(basePath))
                return BuildReturnScript(funcNum, null, "basePath folder doesn't exist");

            var receivedFile = Request.Files[0];

            var fileName = receivedFile.FileName;
            if (string.IsNullOrEmpty(fileName))
            {
                return BuildReturnScript(funcNum, null, "File name is empty");
            }

            var sFileName = System.IO.Path.GetFileName(fileName);

            var nameWithFullPath = System.IO.Path.Combine(basePath, sFileName);
            //Note: you may want to consider using your own naming convention for files, as this is vulnerable to overwrites
            //e.g. at the moment if two users uploaded a file called image1.jpg, one would clash with the other.
            //In the past, I've used Guid.NewGuid() combined with the file extension to ensure uniqueness.
            receivedFile.SaveAs(nameWithFullPath);

            var url = baseUrl + sFileName;

            return BuildReturnScript(funcNum, url, null);
        }

        private ContentResult BuildReturnScript(int functionNumber, string url, string errorMessage)
        {
            return Content(
                string.Format(scriptTag, functionNumber, HttpUtility.JavaScriptStringEncode(url ?? ""), HttpUtility.JavaScriptStringEncode(errorMessage ?? "")),
                "text/html"
                );
        }
    }
}

回复于 2024-05-06T02:14:52+08:00

试试这个

Html and JavaScript

<script src="~/Vendors/ckeditor/ckeditor.js"></script>
 <script src="~/Vendors/ckeditor/adapters/jquery.js"></script>
    <div class="jumbotron">
            <textarea name="editor1"></textarea>
            <script>
                CKEDITOR.replace('editor1', {
                    uiColor: '#9AB8F3',
                    filebrowserUploadUrl: '/CkEditorUpload/'
                });
            </script>

    </div>

Controller

using System;
using System.IO;
using System.Web;
using System.Web.Mvc;

namespace ImageUploadCkEditor.Controllers
{

        public class CkEditorUploadController : Controller
        {
        const string filesavepath = "~/Content/Uploads/Ckeditor";
        const string baseUrl = @"/Content/Uploads/Ckeditor/";

        const string scriptTag = "<script type='text/javascript'>window.parent.CKEDITOR.tools.callFunction({0}, '{1}', '{2}')</script>";

            public ActionResult Index()
            {
                var funcNum = 0;
                int.TryParse(Request["CKEditorFuncNum"], out funcNum);

                if (Request.Files == null || Request.Files.Count < 1)
                    return BuildReturnScript(funcNum, null, "No file has been sent");

                string fileName = string.Empty;
                SaveAttatchedFile(filesavepath, Request, ref fileName);
                var url = baseUrl + fileName;

            return BuildReturnScript(funcNum, url, null);
            }

            private ContentResult BuildReturnScript(int functionNumber, string url, string errorMessage)
            {
                return Content(
                    string.Format(scriptTag, functionNumber, HttpUtility.JavaScriptStringEncode(url ?? ""), HttpUtility.JavaScriptStringEncode(errorMessage ?? "")),
                    "text/html"
                    );
            }

            private void SaveAttatchedFile(string filepath, HttpRequestBase Request, ref string fileName)
            {
                for (int i = 0; i < Request.Files.Count; i++)
                {
                    var file = Request.Files[i];
                    if (file != null && file.ContentLength > 0)
                    {
                        fileName = Path.GetFileName(file.FileName);
                        string targetPath = Server.MapPath(filepath);
                        if (!Directory.Exists(targetPath))
                        {
                            Directory.CreateDirectory(targetPath);
                        }
                        fileName = Guid.NewGuid() + fileName;
                        string fileSavePath = Path.Combine(targetPath, fileName);
                        file.SaveAs(fileSavePath);
                    }
                }
            }
    }

}

回复于 2024-05-06T02:14:52+08:00

用于CKEditor的ASP.NET MVC Image Uploader？

4 回答

相关问题