CKEditor5上传不了图片问题(简单易懂版)_vue+ckeditor上传图片不显示-程序员宅基地

技术标签： java

1、最近想用下CKEditor5 新特性，但发现上传不上去，经调研官网调研如下：

1、首先引入js

https://cdn.ckeditor.com/ckeditor5/17.0.0/classic/ckeditor.js

2、html相关代码

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script src="https://cdn.ckeditor.com/ckeditor5/17.0.0/classic/ckeditor.js"></script>
</head>
<body>
<div id="editor">
</div>
<script>
    ClassicEditor.create( document.querySelector( '#editor' ), {
     
    	
        ckfinder:{
     
        	//后端URL
            uploadUrl: '/upload'
        },
        toolbar: {
     
            items: [        'heading','|','bold','italic','link','bulletedList','numberedList','|','indent','outdent','|','imageUpload','blockQuote',
            'insertTable','mediaEmbed','fontBackgroundColor','fontColor','fontSize','code','codeBlock','alignment','horizontalLine','
            todoList','undo','redo']
        },
        language: 'zh-cn',
        image: {
     
            toolbar: [
                'imageTextAlternative','imageStyle:full','imageStyle:side'
            ]
        },
        table: {
     
            contentToolbar: [
                'tableColumn','tableRow','mergeTableCells'
            ]
        },
        licenseKey: '',

    } )
    .then( editor => {
     
        window.editor = editor;
    } )
    .catch( error => {
     
    } );

</script>
</body>
</html>

3、后端相关代码（Java为例）

//这里必须是POST，或者自己修改CKEditor5 js源代码
	@RequestMapping(value = {
    "upload", "upload/"}, method = RequestMethod.POST)
    @ResponseBody
    //接受参数不能用file 用upload js 源代码已经写死
    public Map<String, String> uploadAdmin(@RequestParam("upload") MultipartFile file){
    
        log.debug("Handling image file upload, name={}, origName={}, size={},", file.getName(),
                file.getOriginalFilename(), file.getSize());
        if (file.isEmpty()) {
    
            log.error("error");
        }
        //固定值
        Map<String, String> map = Maps.newConcurrentMap();
        map.put("uploaded", "1");
        map.put("url", "图片URL");
        //必须这样{"uploaded":"1","url", "图片URL"} 或者自己修改CKEditor5 js源代码
        return map;
    }

本文链接：https://blog.csdn.net/helenyqa/article/details/104615381

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

count/count if函数的基本用法_countif和count一起怎么用-程序员宅基地

文章浏览阅读2.1k次。count函数，用来计算单元格的数的个数，只是用来计数，并且只有只记录数子的个数，文本的个数是不被记录的。但是很少会用到单纯的count函数，往往在工作中计数是带有条件的。就会用到countif函数COUNTIF函数需要注意的点，COUNTIF函数做判断的时候只能判断单元格的前15位，比如：按照常理来说，在A2-A3单元格格的区域内，等于A2单元格的计数数量应该是为2 的，但是COUNTIF函数只能默认拿单元格的前15位数字，超过的部分就不做统计了。如果遇到这样的情况，就需要借用*，这里用了&连_countif和count一起怎么用

【PaddleSpeech】语音合成-男声_fastspeech2_male_zh_ckpt_1.4.0-程序员宅基地

文章浏览阅读1.1k次，点赞10次，收藏9次。使用PaddleSpeech进行语音合成(男声)_fastspeech2_male_zh_ckpt_1.4.0

html编辑器 br 被div,UEditor百度编辑器中各种html标签被过滤掉的解决办法-程序员宅基地

文章浏览阅读449次。在之前的文章编写过程中，插入JS代码后，第一次文章会显示正常，而之后在后台编辑器中再打开看, 发现好多标签竟然被删掉了。后来发现解决办法非常简单。我们在插入代码后，源码模式下，看起来是正常的，但是为什么保存完之后，数据库中正常，但是编辑器中不正常呢？很多富文本编辑器都有两种初始化方式，以UEditor为例，一种是textarea标签，一种是script标签。举例textarea方式：这里写你的初始..._百度富文本编辑器过滤了html标签

Java大厂笔试&&面试集合大全目录，java笔试面试宝典-程序员宅基地

文章浏览阅读661次，点赞6次，收藏20次。最后还准备了一套上面资料对应的面试题（有答案哦）和面试时的高频面试算法题（如果面试准备时间不够，那么集中把这些算法题做完即可，命中率高达85%+）份系统化的资料的朋友，可以添加V获取：vip1024b （备注Java）**(img-0bihoba1-1713545040863)]JAVA相关笔试题，祝各位找到好工作！Java网络安全面试题系列。

Latex 反斜对角省略号实现_latex 省略号-程序员宅基地

文章浏览阅读1.1w次，点赞9次，收藏36次。Latex 反斜对角省略号_latex 省略号

python爬图mzitu_[Python]爬取mzitu网站-程序员宅基地

文章浏览阅读5.7k次。1 importio2 importos3 importre4 importsys5 importdatetime6 from bs4 importBeautifulSoup7 from pxydowwload importrequest8 from pymongo importMongoClient910 sys.stdout = io.TextIOWrapper(sys.stdout.buff..._mzitu

随便推点

Unity粒子特效系列-龙卷风预制体做好了，unitypackage包直接用！_unity螺旋风特效-程序员宅基地

文章浏览阅读2.2w次，点赞53次，收藏63次。????????即将学会利用粒子系统实现超真实的龙卷风效果。我们要掌握核心科技，提高生产力。其中关键的内容就是旋转，速度，大小变化以及颜色变化。????效果预看视频地址：Unity粒子特效系列-龙卷风效果_哔哩哔哩_bilibili????案例环境Unity 2020.3LTS系列????实践过程首先搞清楚龙卷风分为两部分，从上而下的小部分，从下而上的大部分！接着我们就要分开实现了。上半部分开始之前先确定下思路：需要有旋转有风就要有速度模块 _unity螺旋风特效