自定义CKEditor5富文本编辑器的图片上传功能

解决方案

在使用CKEditor5编辑器的时候，发现图片上传功能需要额外的插件来进行处理，但本身提供了接口，允许我们进行自定义上传。于是根据官方文档，自定义了一个上传功能。

目前使用的是经典编辑器，使用方式如下：

第一步：引入必需的js文件

// index.html文件

<!--编辑器容器-->
<textarea id="editor"></textarea>

<script src="../../../resource/lib/jquery.js" type="text/javascript"></script>

<!--核心文件-->
<script src="../../../resource/lib/ckeditor/ckeditor.js" type="text/javascript"></script>
<!--多语言-中文-->
<script src="../../../resource/lib/ckeditor/translations/zh-cn.js" type="text/javascript"></script>　　

　　

第二步：初始化编辑器

let element = document.getElementById('editor');

// 初始化组件
ClassicEditor
    .create(element, {
        language: 'zh-cn'
        // toolbar: [ 'heading', '|', 'bold', 'italic', 'link' ]
    })
    .then(editor => {
        editor.plugins.get("FileRepository").createUploadAdapter = loader => {
            return new uploadAdapter(loader);
        };
        this.editor = editor;

    })
    .catch(err => {
        console.error(err.stack);
    });

 

第三步：定义图片上传类

var uploadAdapter = function (loader) {
    this.loader = loader;
}

uploadAdapter.prototype = {
    upload: function () {
        let self = this;
      　// 因为编辑器插件需要返回一个promise对象return new Promise(function (resolve, reject) {
　　　　　　  // 读取选中的文件
            self.loader.file.then(function (file) {
                // 我们通过formData进行图片上传
                let form = new FormData();
                form.append('file', file);

                $.ajax({
                    url: '/api/admin/file/uploadEditorImage',
                    type: 'post',
                    contentType: false,
                    processData: false,
                    data: form,
                    success: function (res) {
　　　　　　　　　　　　　　 // 定义插件返回格式
                        resolve({
                            default: res.url
                        });
                    },
                    error: function (err) {
                        reject(err);
                    }
                });
            })
        });
            
    },
    abort: function () {
       // 图片删除方法，可以调用后端api进行文件删除
    }
}

第四步：后端接收文件

[HttpPost("uploadEditorImage")]
public async Task<IActionResult> Upload(){
    var files = Request.Form.Files;
　　 // ... 省略处理代码

　　 // 返回上传成功后的链接
    return Ok(new { code=1,msg="ok",url=url});

}

 

图片上传功能开发完成，前端代码中使用了一些ES6代码，在不支持的浏览器中需要进行预处理，这里不再说明。

参考资料

官方文档：Predefined builds - CKEditor 5 Documentation