CKEditor5 自定义上传图片

最新推荐文章于 2024-06-04 10:01:13 发布

happyElina

最新推荐文章于 2024-06-04 10:01:13 发布

阅读量5.2k

点赞数 1

分类专栏：技术总结文章标签：编辑器上传图片前端 CKEditor

本文链接：https://blog.youkuaiyun.com/happyElina/article/details/86158285

版权

本文档介绍了如何在CKEditor 5中集成自定义图片上传功能，以避免依赖CKEditor的服务或后端配置。作者选择编写一个名为MyUploadAdapter.js的插件，通过调用init方法实现将图片上传至公司服务器。在集成过程中，遇到文件导入导出问题、需登录后才能调用上传接口以及调整上传数据以匹配后端接口需求等挑战，通过调试和理解后端接口，最终成功实现了富文本编辑器的图片上传功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

公司的网站中也要集成富文本编辑器，我们选择了CKEditor 5，官方网址

在集成的过程中需要完成图片上传到公司服务器，在文档中有三种方法，三种方法，

第一种是用CKEditor 的服务肯定是不行，第二种需要后端配置一些东西，最好也不要麻烦别人，第三种就是自己根据引导去写一个自定义插件，因为他都基本写好了，所以比较容易，于是就自己写了一个MyUploadAdapter.js 文件，在需要的地方引用就可以使用其中的init方法来生成一个可以把图片上传到公司服务器的富文本编辑器，代码如下


import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
export default class MyUploadAdapter {
    constructor( loader, url ) {
        // The FileLoader instance to use during the upload. It sounds scary but do not
        // worry — the loader will be passed into the adapter later on in this guide.
        this.loader = loader;


        // The upload URL in your se

最低0.47元/天解锁文章