ckeditor5上传图片至服务器（解决自带代码上传失败问题）

rudy5348

于 2019-02-02 01:30:20 发布

阅读量4.5k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：日常

本文链接：https://blog.csdn.net/rudy5348/article/details/86746936

本文介绍如何解决ckeditor5自带代码上传图片到服务器失败的问题，包括前端代码配置、使用Java搭建Servlet服务、Tomcat的文件夹配置，以及如何获取编辑器的HTML内容。

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

直接开始正题

1、前端代码

加载JS文件

<script src="ckeditor.js"></script>

页面内js

<script>
var myEditor = null;
window.onload = function(){
	CKEDITOR = ClassicEditor
     .create(document.querySelector("#editor"), {
         ckfinder: {
        	 uploadUrl: "http://localhost:8080/text/index"
         }
     })
     .then(editor => {
        myEditor = editor;
    })
    .catch( error => {
        console.error( error );
    } );

}
</script>

HTML代码

<textarea name="content" id="editor"></textarea>

2、通过Java搭建Servlet服务完成后端上传（实现随机文件名）

import java.io.File;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.HashMap;
import java.util.Iterator;
import java.util.List;
import java.util.