ueditor 添加字号大小_springboot集成ueditor笔记

环境配置如下

IntelliJ IDEA 2018.3.5 x64
spring-boot2.0.2
apache-maven-3.5.4
ueditor1_4_3_2-utf8-jsp

新建一个springboot web项目,将下载好的资源文件放入static文件夹下的ueditor文件夹；

资源文件存放目录如图(index.html被我刪除了,所以图中未显示)

引入资源后将jsp文件夹下lib包注入项目,(Idea直接ctrl+shift+alt+s)

修改01；

修改02

/**
 *
 */
package com.book.book.contorller;

import java.io.*;
import java.util.UUID;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.core.io.ClassPathResource;
import org.springframework.core.io.Resource;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;
import com.alibaba.fastjson.JSON;
import com.book.book.dto.UeditorConfig;

/**
 * @author Administrator
 *
 */

@Controller
public class UeditorContorller {

    private static final Logger log = LoggerFactory.getLogger(UeditorContorller.class);

    @RequestMapping("/index")
    public String getAddress() {
        System.out.println("进入页面");
        return "index";
    }

    /**
     * 根目录请求
     * @author zpY
     * @version V1.0
     */

    @ResponseBody
    @RequestMapping("ueditorConfig")
    public Object ueditorConfig(MultipartFile upfile, HttpServletRequest request, HttpServletResponse response, String action) {
        switch (action) {
            case "config":
                log.info("读取config.json");
                Object uEditorConfig = this.getUEditorConfig(response);
                return uEditorConfig;
            case "uploadimage":
                log.info("图片上传");
                String returnJson = this.uploadimage(upfile, request, response);
                return returnJson;
        }
        return "请求失败";
    }

    /**
     * 读取ueditor/config.json
     * @author zpY
     * @date 2019年5月25日 下午7:06:05
     * @version V1.0
     */
    public Object getUEditorConfig(HttpServletResponse response) {
        try {
            response.setContentType("application/json;charset=utf-8");
            Resource resource = new ClassPathResource("static/ueditor/jsp/config.json");
            BufferedReader br = new BufferedReader(new FileReader(resource.getFile()));
            StringBuilder stringBuilder = new StringBuilder();
            String configJson;
            while ((configJson = br.readLine()) != null) {
                stringBuilder.append(configJson);
            }
            return stringBuilder.toString();
        } catch (Exception e) {
            log.error("读取ueditor/config.json异常" + e);
            return "error";
        }
    }

    /**
     * 上传图片
     * @author zpY
     * @date 2019年5月25日 下午7:16:47
     * @version V1.0
     */
    public String uploadimage(MultipartFile upfile, HttpServletRequest request, HttpServletResponse response) {
        UeditorConfig ueditorConfig = new UeditorConfig();
        try {
            try {
                String fileName = upfile.getOriginalFilename();
                String suffixName = fileName.substring(fileName.lastIndexOf("."));
                fileName = UUID.randomUUID()+suffixName;
                String visitUrl = "http://localhost:8081/boot/"+fileName;
                //自定义存放路径
                String filePath = "F:/book/book/target/classes/uploadimage/";
                try {
                    upfile.transferTo(new File(filePath+fileName));
                } catch (Exception e) {
                    e.printStackTrace();
                }

                // 返回状态码
                ueditorConfig.setState("SUCCESS");
                ueditorConfig.setUrl(visitUrl);
                ueditorConfig.setSize(upfile.getSize());
                ueditorConfig.setOriginal(fileName);
                ueditorConfig.setType(upfile.getContentType());

            } catch (Exception e) {
                e.printStackTrace();
            }

        } catch (Exception e) {
            e.printStackTrace();
            ueditorConfig.setState("ERROR");
        }
        String returnJson = JSON.toJSONString(ueditorConfig);
        log.info("图片上传返回字符===>>>" + returnJson);
        return returnJson;
    }


}

dto

/**
 *
 */
package com.book.book.dto;


import lombok.Data;
import org.springframework.boot.autoconfigure.domain.EntityScan;

/**
 *
 * @author Administrator
 * {state：”状态”，url：”回显路径”，size：”大小”，type：”类型”，title：”文件title”，original：”名称”}
 */

@Data
@EntityScan
public class UeditorConfig {
    private String state;
    private String url;
    private long size;
    private String type;
    private String title;
    private String original;

}

上面两步正常走完后基本能够正常上传单图和多图,只是无法正常显示上传成功的图片到编辑器；

修改03；

代码层面就三步,这篇笔记是在网上找了各路大神参考而来,基本来自CSDN/简书；

01,正常读取config.json

顺嘴说一句,ueditor传文件有限制,如果没有在application.properties 加限制配置,则该版本ueditor默认上传文件大小

【The field upfile exceeds its maximum permitted size of 1048576 bytes.】

为了适应实际情况,可以在application.properties 添加如下配置,大小根据实际系统条件设置

///

当然,如果正常走到这里,那么这个容器是已经可以正常使用单图/多图上传,改变样式之类的服务了,但在正常业务场景中来说,添加和修改是必定是双生子,那么就需要这个富文本把已填写的数据保持原样回显回这个容器内方便人们对不满意的地方进行修改,此处修改如下：

<body>
<!--后端数据返回待回显数据(带标签的内容) -->
<input  type="hidden" th:value="${bookDetails}" id="bookDetail"/>
    <p><span>&nbsp;&nbsp;图文详情</span><br/></p>
    <script id="editor" type="text/plain" style="width:1024px;height:500px;"></script>
    <!--保存到数据库信息回显加载到富文本 -->
    <script type="text/javascript">
    var ue = UE.getEditor('editor');
    var bookDetail = document.getElementById("bookDetail").value;
    //监听编辑器是否初始化完毕,对应赋值到编辑容器
    $(document).ready(function () {
        ue.ready(function () {
            if (!!bookDetail){
                <!--回显数据填充加载到富文本框 -->
                ue.setContent(""+bookDetail+"");
                <!--用户未选择编辑事件前,该容器将关闭修改服务 -->
                ue.setDisabled();
            }
        });
    });
    </script>
    <style type="text/css">div {   width: 100%;   }</style>
    <div id="btns">
        <div>
            <button onclick="getimgContent()">提交图文信息</button>
        </div>
    </div>
</body>

这样,当需要编辑它的时候,请求携带待回显数据进入编辑页面,该容器自然会成功初始化内容；