如何在 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;
            }
        }
    }