【CKEditor5 笔记】如何在CKEditor5中使用自定义图片上传功能

【CKEditor5 笔记】如何在CKEditor5中使用自定义图片上传功能

---

简介

网络上关于CKEditor5 富文本编辑器的相关中文资料还是太少，鉴于此我将结合官方文档和自己使用经验写篇关于CKEditor5的笔记。

个人站点：https://www.quanquanting.com/ 欢迎访问！

本篇笔记将简单的介绍一下如何在CKEditor5中使用自定义图片上传功能。

在CKEditor5富文本编辑器中，插入图片是一个非常普通且必要的功能。因此官方也提供了多种方法用于在编辑器中插入图片。

• 从剪切板复制粘贴图片
• 从文件夹拖动图片文件
• 选择编辑器自带的上传按钮

其中最关键的就是插入图片自动上传到自己的服务器或是其他图床。根据官方的介绍，他们提供了四种上传图片的方法。

• Easy Image
• CKFinder
• Simple adapter
• Base64 adapter

当然还有可以自己根据官方的接口写自己的上传方法。这里我将主要介绍如何写自己的上传方法实现图片的上传，至于官方的几种上传方法我就简单的介绍一下吧。

Easy Image

Easy Image是CKEditor云服务产品的一部分。 其目的就是为了用户上传图片，这种方式也是最为简单，便捷。如果使用这种方法根本不需要自己配置服务器。具体如何使用详见：如何在项目中使用Easy Image

CKFinder

CKFinder 是一个基于浏览器的文件上传器，如果整合CKFinder 和CKEditor5 就可以实现文件的上传等功能。当然官方也提供了两种集成的方式。具体使用详见：如何在项目中集成CKFinder

Simple adapter

Simple adapter允许使用XMLHttpRequest API和最少的编辑器配置将图像上载到服务器。具体使用详见：如何在项目中使用Simple adapter

Base64 adapter

Base64上传功能可将插入编辑器中的图像转换为编辑器输出中的Base64字符串。具体使用详见：如何在项目中使用Base64编码图片

自定义上传方法

使用自定义的上传适配器，我们就可以完全控制将文件发送到服务器以及服务器响应整个流程。在CKEditor5 中任何上传适配器都需要实现UploadAdapter接口才能正常工作，必须要带有upload()和abort()这两个方法。

代码如下：

class MyUploadAdapter {
    constructor(loader) {
        // The file loader instance to use during the upload.
        this.loader = loader;
    }

    // Starts the upload process.
    upload() {
        return this.loader.file
            .then(file => new Promise((resolve, reject) => {
                this.uploadFile(file, resolve);
            }));
    }

    uploadFile(file, resolve) {
        // 上传文件
        $.ajax({
            url: "XXXXXXXXX",
            type: 'POST',
            data: file,
            processData: false,
            beforeSend: function (request) {
                request.setRequestHeader("Content-Type", file.type);
            },
            success: function (respJson) {
                if (respJson.code == 0) {
                    resolve({
                        default: respJson.result[0].url
                    });
                } else {
                    alert("错误：" + respJson.msg)
                }
            },
            error: function (e) {
            }
        });
    }

    // Aborts the upload process.
    abort() {
        // Reject the promise returned from the upload() method.
        server.abortUpload();
    }
}

接下来就是定义FileRepository.createUploadAdapter()工厂方法，该方法使用MyUploadAdapter类在编辑器中启用上传适配器：

editor.plugins.get( 'FileRepository' ).createUploadAdapter = ( loader ) => {
    return new MyUploadAdapter( loader );
};

搞定！！！

总结

自己目前用的方法就是自定义的上传适配器，亲测可用，如果笔记中有误，欢迎指正！

参考

[1] https://ckeditor.com/docs/ckeditor5/latest/framework/guides/deep-dive/upload-adapter.html