springboot整合百度ueditor富文本框编辑器实现图片上传和回显

       在项目中遇到一些自自定义的页面,需要富文本框编辑器来编辑然后把编辑内容存放到数据库中,通过加载模版,把内容填充到模版网页中,在整合过程遇到了上传不了图片和图片上传成功却不能在富文本框中显示的问题,困扰了我很久,今天恰好解决,因此写一篇博客记录下,加深记忆也希望能帮到大家!

     一:创建springboot项目

         在idea中点击file按钮,然后单击new,新建一个project,在创建一个project时选择spring Initalizr,然后选择下一步,输入工程名称,一直按提示到完成创建springboot项目

        

二:去百度ueditor官网下载jsp版本

    官方网址为:https://ueditor.baidu.com/website/download.html,在最喜版本下下载jsp的utf-8版本,等待下载完成后解压

三:在springboot项目中的resource下创建static文件夹并把解压好的文件夹放到该文件夹下

       在resource下创建一个名为index的页面文件,并把ueditor下的index页面内容复制到刚才创建的页面中,注意引入js和css的路径,然后把config.json拷贝到resource下,并配置访问路径前缀和上床图片保存路径

上传文件的基本路径可以自定义配置成你所需要的路径!

四:创建上传图片所需要的java类

    目录结构如下图所示

下面我就把这些类的代码贴出来,以供参考之用

UEditorController类代码,上传图片的类
package com.example.demo.example;

import com.example.demo.ActionEnter;
import org.json.JSONException;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;

/**
 * Created by ldb on 2017/4/9.
 */
@Controller
public class UEditorController {


    @RequestMapping("/")
    private String showPage(){
        return "index";
    }

    @RequestMapping(value="/config")
    public void config(HttpServletRequest request, HttpServletResponse response) throws JSONException {
        response.setContentType("application/json");
        String rootPath = request.getSession().getServletContext().getRealPath("/");
        try {
            String exec = new ActionEnter(request, rootPath).exec();
            PrintWriter writer = response.getWriter();
            writer.write(exec);
            writer.flush();
            writer.close();
        } catch (IOException e) {
            e.printStackTrace();
        }

    }
}

然后在ueditor.config.js中配置服务器同意接口路径

经过上面几个步骤就可以完成上传图片和图片回显功能了,其它的代码详见:https://github.com/lijobs/ueditor_upload_images下载下来就可以用了,如果您觉得我的代码解决了您的问题,还请麻烦start下,感激不尽!!

 

  • 4
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值