Ckeditor5

CKEditor 5 Online Builder | Create your own editor in 5 steps

CKEditor4 不支持图片大小缩放，CKEditor5开始支持各种插件，包括图片缩放等。

选择合适的模式一步步选择。

前端：

<html>
<body>
  <div class='ckeditor51'></div>
</body>
</html>

<script>
//富文本控件初始化
ClassicEditor
    .create(document.querySelector('.ckeditor51'), {
        ckfinder: {
            uploadUrl: '/Upload'
            //后端处理上传逻辑返回json数据,包括uploaded(选项true/false)和url两个字段
        }
    })
    .then(editor1 => {
        window.editor = editor;
    })
    .catch(error => {
        console.error(error);
    });

//赋值
window.editor.setData('赋值');
//取值
window.editor.getData();

</script>

后端：

public async Task<ActionResult> Upload(HttpPostedFileBase upload)
        {
            try
            {
                //格式判断。
                var extension       = Path.GetExtension(upload.FileName);
                var imageExtensions = new[] {".png", ".jpg", ".jpeg", ".bmp", ".gif"};

                if (!imageExtensions.Any(x => string.Equals(extension, x, StringComparison.CurrentCultureIgnoreCase)))
                {
                    return Json(new {uploaded = 0, error = new {message = Res.ErrorNotAllowedFileExt}});
                }

                var filename  = $"{Guid.NewGuid():N}{extension}";

                //文件上传实现。。。。。。。。

                var ret = new StringBuilder();
                var uri = System.Web.HttpContext.Current?.Request.Url;
                string url=".......";

                var url = ret.ToString();
                //返回格式
                return Json(new {uploaded = 1, filename, url});
            }
            catch(Exception ex)
            {
                return Json(new {uploaded = 0, error = new { message = ex.Message}});
            }
        }

这里分享我已经生成好的文件（点击下载）