JAVA通过CKEditor文本编辑器上传图片

最新推荐文章于 2025-03-04 20:34:46 发布

微微凉的风丶

最新推荐文章于 2025-03-04 20:34:46 发布

阅读量2.2k

点赞数

分类专栏： Java 文章标签： ckeditor java

本文链接：https://blog.youkuaiyun.com/alistring/article/details/55510907

版权

Java 专栏收录该内容

2 篇文章

订阅专栏

本文主要介绍了如何在Java环境下配置CKEditor，设置其图片上传功能。首先，通过修改CKEditor的config.js文件配置上传方法。接着，展示了在Java后端实现图片上传的代码示例。最后，通过返回uploadJump.jsp页面进行图片预览，从而完成图片上传流程。

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

配置和部署我就不多做解释了,直接进入正题吧

第一步,我们要让CKEditor知道我们的上传图片的方法

找到名叫config.js的文件

这里写图片描述

加上如下配置:

CKEDITOR.editorConfig = function( config ) {
    config.image_previewText =' ';
    config.filebrowserImageUploadUrl = "/fileUpload/imageUpload";
};

第二步,在后台写上上传图片的方法,这里已JAVA为例

package com.rwj.blog.controller;

import java.io.InputStream;
import java.util.UUID;

import javax.servlet.http.HttpServletRequest;

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.multipart.commons.CommonsMultipartFile;

import com.aliyun.oss.OSSClient;
import com.rwj.blog.util.ConfigUtil;

@Controller
@RequestMapping(value="fileUpload")
public class FileUploadController {

    private static Logger logger = LoggerFactory.getLogger("logs");

    @RequestMapping(value="/imageUpload")
    public String index(
        HttpServletRequest request, 
        ModelMap model,
        @RequestParam("upload") CommonsMultipartFile file
    ) {
        try{
            if(file != null){
                  //将文件上传到阿里OSS上
                  String endpoint = ConfigUtil.getParameter("endpoint");
                  String accessKeyId = ConfigUtil.getParameter("accessKeyId");
                  String accessKeySecret = ConfigUtil.getParameter("accessKeySecret");
                  String bucketName = ConfigUtil.getParameter("bucketName");
                  String imageHeadUrl = ConfigUtil.getParameter("imageHeadUrl");
                  OSSClient ossClient = new OSSClient(endpoint, accessKeyId, accessKeySecret);
                  InputStream inputStream = file.getInputStream();
                  //获取上传后的图片地址,并且关闭OSS连接
                  String imageUrl = UUID.randomUUID().toString() + ".jpg";
                  ossClient.putObject(bucketName, imageUrl, inputStream);
                  if(ossClient != null) ossClient.shutdown();
                  if(inputStream != null) inputStream.close();
                  //将图片信息返回给CKEditor
                  String callback = request.getParameter("CKEditorFuncNum"); 
                  model.put("imageUrl", imageHeadUrl + "/" + imageUrl);
                  model.put("callback", callback);
            }
        }catch(Exception e){
            e.printStackTrace();
            logger.error("");
        }
        return "/uploadJump";
    }

}

第三步,返回一个名为uploadJump.jsp的页面给CKEditor,主要是用于预览

<script type="text/javascript">
    window.parent.CKEDITOR.tools.callFunction('${callback}','${imageUrl}','');
</script>

最后上传成功!

这里写图片描述