如何在 ASP.NET Core MVC 项目的 CkEditor 中上传图片？

Question

我是 CkEditor 的新手，我已经成功地将编辑器集成并自定义到我的页面，但我无法上传图片。在 CkEditor 文档中，我发现他们使用 PhP 脚本上传文件，但我不确定如何将其添加到我的 ASP.NET MVC 项目中。

Answer 1

按照我的方式一步一步来：

首先，将其添加到您的布局中：

@RenderSection("scripts", required: false)

然后将此添加到您的视图中：

@section scripts{
<script src="https://cdn.ckeditor.com/4.10.1/standard/ckeditor.js"></script>
    <script>

        CKEDITOR.replace('textarea's name', {
            customConfig: '/js/CustomConfig.js'
        });

    </script>
}

你可以看到我正在使用 CDN 和 CKeditor 版本 4.10.1。 CustomConfig.js 是一个自定义 javascript 文件，您可以在项目中创建它。在 CustomConfig.js 中添加此代码：

CKEDITOR.editorConfig = function (config) {   
    config.removeDialogTabs = 'image:advanced;image:Link;link:advanced;link:upload';   
    config.filebrowserImageUploadUrl = '/Home/UploadImage' //Action for Uploding image  
};

最后在行动中使用这个代码：

        [HttpPost]
        public ActionResult UploadImage(IFormFile upload, string CKEditorFuncNum, string CKEditor, string langCode)
        {                  
            if (upload.Length <= 0 ) return null;
            if (!upload.IsImage())
            {
                var NotImageMessage = "please choose a picture";
                dynamic NotImage = JsonConvert.DeserializeObject("{ 'uploaded': 0, 'error': { 'message': \"" + NotImageMessage + "\"}}");
                return Json(NotImage);
            }

            var fileName = Guid.NewGuid() + Path.GetExtension(upload.FileName).ToLower();

            Image image = Image.FromStream(upload.OpenReadStream());
            int width = image.Width;
            int height = image.Height;
            if ((width > 750) || (height > 500))
            {
                var DimensionErrorMessage = "Custom Message for error"
                dynamic stuff = JsonConvert.DeserializeObject("{ 'uploaded': 0, 'error': { 'message': \"" + DimensionErrorMessage + "\"}}");
                return Json(stuff);
            }

            if (upload.Length > 500 * 1024)
            {
                var LengthErrorMessage = "Custom Message for error";
                dynamic stuff = JsonConvert.DeserializeObject("{ 'uploaded': 0, 'error': { 'message': \"" + LengthErrorMessage + "\"}}");
                return Json(stuff);                
            }

            var path = Path.Combine(
                Directory.GetCurrentDirectory(), "wwwroot/images/CKEditorImages",
                fileName);

            using (var stream = new FileStream(path, FileMode.Create))
            {
                upload.CopyTo(stream);

            }

            var url = $"{"/images/CKEditorImages/"}{fileName}";
            var successMessage = "image is uploaded successfully";
            dynamic success = JsonConvert.DeserializeObject("{ 'uploaded': 1,'fileName': \"" + fileName + "\",'url': \"" + url + "\", 'error': { 'message': \"" + successMessage + "\"}}");
            return Json(success);
        }

IsImage()是检查图片的扩展方法：

    public static class ImageValidator
    {
        public static bool IsImage(this IFormFile file)
        {
            try
            {
                var img = System.Drawing.Image.FromStream(file.OpenReadStream());
                return true;
            }
            catch
            {
                return false;
            }
        }
    }

如何在 ASP.NET Core MVC 项目的 CkEditor 中上传图片？

How to upload image in CkEditor in ASP.NET Core MVC project?

c#

ckeditor

asp.net-core-mvc