SSM整合富文本编辑器editormd、常用Api、图片上传、回显

前言：

几天前，集成了百度的ueditor，感觉不符合现代前端的审美逻辑，并且肥胖，pass了，偶然发现editormd，觉得美滋滋，一路踩坑下来，特此记录
editormd:支持 AMD / CMD 模块化加载（支持 Require.js & Sea.js），并且支持自定义扩展插件；

传送门：editormd下载地址
这里有个坑，之前下载了-java版本-php版本，集成有问题

开始

1、复制editormd文件夹到项目，static文件夹为静态资源目录，spring已经将static静态化，精简的目录结构如下：
editormd目录结构

2、引入css、js、html，注意相对路径

<link rel="stylesheet" href="../../../static/css/editormd.min.css"/>

<script src="../../../static/js/editormd.min.js" type="text/javascript"></script>

<div id="editormd">
    <textarea style="display:none;" name="markdownContent"></textarea>
</div>

3、js配置、初始化，注意:path指向lib文件夹，

// editormd 配置
var editormd_Ins;
editormd_Ins = editormd("editormd", {
    width: "100%",
    height: 640,
    syncScrolling: "single",
    path: "../../../static/editormd/lib/",
    saveHTMLToTextarea: true, //注意3：这个配置，方便post提交表单
    //开启图片上传
    imageUpload: true,
    imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
    imageUploadURL: "/imageUpload",//图片接口
});

4、图片上传接口后台java代码
注意1：如果使用idea打包war，这时候get图片会404，因为idea是虚拟了一个tomcat，如果想要正常get，手动startup.bat
注意2：@RequestParam(value = "editormd-image-file", required = true，参数不要动

/**
 * editormd上传图片
 *
 * @param file
 * @param request
 * @return
 */
@RequestMapping("/imageUpload")
@ResponseBody
public JSONObject imageUpload(@RequestParam(value = "editormd-image-file", required = true) MultipartFile file, HttpServletRequest request) {
    //路径
    String path = request.getSession().getServletContext().getRealPath("/");
    //使用硬盘路径替代path，防止重新部署Tomcat项目图片丢失，此处tomcat已经docbase指向了"D:/"
    path = "D:/";
    //保存相对路径，解决同源问题
    String relativePath = "editorImg/";
    //文件名
    String trueFileName = file.getOriginalFilename();
    //后缀名
    String suffix = trueFileName.substring(trueFileName.lastIndexOf("."));
    //重新命名
    String fileName = System.currentTimeMillis() + "_" + CommonUtil.getRandomNumber(100, 999) + suffix;
    //io
    File targetFile = new File(path+relativePath, fileName);
    if (!targetFile.exists()) {
        targetFile.mkdirs();
    }
    //保存
    try {
        file.transferTo(targetFile);
    } catch (Exception e) {
        e.printStackTrace();
    }
    //返回给前端
    JSONObject res = new JSONObject();
    res.put("url", "../"+relativePath + fileName);
    res.put("success", 1);
    res.put("message", "upload success!");
    return res;
}

5、常用两个方法

//editormd_Ins 步骤3中editormd实例化对象
//获得markdown格式的文本
editormd_Ins.getMarkdown()
//获得html源码
editormd_Ins.getHTML()

6、数据回显
常规而言分为两种场景：
1、动态创建，即编辑状态

<div id="test-editormd">
   <textarea style="display:none;" name="test-editormd-markdown-doc">###Hello world!</textarea>               
</div>

//动态创建
testEditormd = editormd("test-editormd", {
    width: "90%",
    height: 640,
    markdown : "### 动态创建 Editor.md\r\n\r\nDynamic create Editor.md",
    path : '../lib/'//注意lib的路径指向
});

2、静态创建，即非编辑状态，转HTML输出页面

<div id="test-editormd-view">
   <textarea style="display:none;" name="test-editormd-markdown-doc">###Hello world!</textarea>               
</div>

//静态创建方法：
testEditormdView = editormd.markdownToHTML("test-editormd-view", {
    markdown        : markdown ,//+ "\r\n" + $("#append-test").text(),
    //htmlDecode      : true,       // 开启 HTML 标签解析，为了安全性，默认不开启
    htmlDecode      : "style,script,iframe",  // you can filter tags decode
    //toc             : false,
    tocm            : true,    // Using [TOCM]
    //tocContainer    : "#custom-toc-container", // 自定义 ToC 容器层
    //gfm             : false,
    //tocDropdown     : true,
    // markdownSourceCode : true, // 是否保留 Markdown 源码，即是否删除保存源码的 Textarea 标签
    emoji           : true,
    taskList        : true,
    tex             : true,  // 默认不解析
    flowChart       : true,  // 默认不解析
    sequenceDiagram : true,  // 默认不解析
});

SSM整合富文本编辑器editormd、常用Api、图片上传、回显

前言：

猜你喜欢