thymeleaf+springBoot+layui富文本编辑器，实现富文本图片上传及回显

最近需要实现一个简单的富文本编辑功能，项目架构基于thymeleaf+springBoot，没有实现存粹的前后端分离

百度了一下好像很多人用的ueditor

可是这玩意官网都进不去了 - -

好在需求不高，只要实现简单的文字+图片编辑就可以了，所以用了个简单的layui的富文本组件，看官网说明就能直接上手使用

https://www.layui.com/doc/modules/layedit.html

 

资源文件需要准备一下layui

 

界面直接引用

   <textarea class="layui-textarea" id="LAY_demo1" style="display: none">
  把编辑器的初始内容放在这textarea即可
</textarea>

script部分

<script>

    layui.use('layedit', function () {
        var layedit = layui.layedit
            , $ = layui.jquery;

//设置服务器上传文件接口
        layedit.set({
            uploadImage: {
                url: basePath + '/file/img' //接口url
                ,type: 'post' //默认post
            }
        });
        //构建一个默认的编辑器
        var index = layedit.build('LAY_demo1');

    
        $('#save').on('click', function () {
            confirmAdd(layedit.getContent(index));
        });

    });
// 保存完整信息
    function confirmAdd(content) {
        $z.ajaxStrAndJson({
            url: basePath + "/newsInfo/save",
            data: {
                title: $("#title-insert").val(),
                context: content
            },
            success: function (data) {
       // 成功后执行方法
                });
            }
        });
    }
</script>

服务端部分

@PostMapping("/img")
    public R uploadRoomImg(@RequestParam("file") MultipartFile file) {
        if (null == file) {
            // 文件参数为空
            return R.error("文件不可为空");
        }

        FileEntity fileEntity = FileUtil.saveFile2(file, saveFilePath);
        fileEntity.setObjectType(MyConstant.STUDY_DATA_NAME);
//        fileEntity.setObjectId(id);

        boolean flag = false;

        for (int i = 0; i < MyConstant.fileTypes.length; i++) {
            if (fileEntity.getFileType().equals(MyConstant.fileTypes[i])) {
                flag = true;
                break;
            }
        }
        if (!flag) {
            return R.error("暂不支持该格式！");
        }

        save(fileEntity);
        Map<String, Object> map = new HashMap<>();
        map.put("src", FileUtil.serverPATH + fileEntity.getFilePath());
        // 保存后返回成功信息
        return R.error(0, "成功").put("data", map);
    }

工具类FileUtil.java

import health.website.entity.FileEntity;
import org.apache.commons.io.FileUtils;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.util.ClassUtils;
import org.springframework.web.multipart.MultipartFile;

import java.io.File;
import java.io.IOException;

public class FileUtil {

    private static Logger logger = LoggerFactory.getLogger(FileUtil.class);
    private static String PATH = "/mystatic/file/";
    public static String serverPATH = "http://localhost:8029/health";
    private static String realPath = ClassUtils.getDefaultClassLoader().getResource("static").getPath() + PATH;

    public static FileEntity saveFile2(MultipartFile multipartFile, String path) {
//这里由于项目需求，自己封装了一个文件对象，不需要可以去掉，只返回保存的路径
        FileEntity fileEntity = new FileEntity();
        String inputname = multipartFile.getOriginalFilename();
        logger.info("成功接文件------------>" + inputname);
        String typeName = inputname.substring(inputname.lastIndexOf(".") + 1);
        String outname = System.currentTimeMillis() + "." + typeName;
        File savedFile = new File(path, outname);
        File savedFile2 = new File(realPath, outname);
        logger.info("服务器实际路径---------------->" + savedFile2.getPath());
        String savePath = PathUtils.concat(path, outname);
        String savePath2 = PATH + outname;
        fileEntity.setFileName(inputname);
        fileEntity.setFilePath(savePath2);
        fileEntity.setFileType(typeName);
        try {
            FileUtils.copyInputStreamToFile(multipartFile.getInputStream(), savedFile);
            FileUtils.copyInputStreamToFile(multipartFile.getInputStream(), savedFile2);
            logger.info("成功保存文件------------> " + savePath);
        } catch (IOException e) {
            e.printStackTrace();
        }
        return fileEntity;
    }
}

效果如图

然后回显的时候需要注意一下，不能直接用  th:text  会把标签也显示出来，需要按富文本内容显示的话需要使用  th:utext

  <div th:utext="${item.context}">
                                                </div>

layui的富文本功能比较简单，使用也简单~