spring 整合editor.md 实现markdown 编辑demo

最新推荐文章于 2023-10-17 12:02:45 发布

我是王小贱

最新推荐文章于 2023-10-17 12:02:45 发布

阅读量408

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_34377273/article/details/106550345

版权

前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

整合一个编辑器，其实很简单。首先找到他的源码，以editor.md 为例：Editor官方文档
这里我写了一个小demo，可以下载参考：SpringBoot整合editor.md小案例下载

将下载好的压缩包解压好，目录如下：
在这里插入图片描述
自己创建一个SpringBoot项目，创建一个空白的页面。将解压后的index.jsp文件中的相关内容拷贝到我们的页面中。
我的页面如下：

<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <title>MarkDown编辑器</title>
    <link th:href="@{/editor/css/style.css}" rel="stylesheet"/>
    <link th:href="@{/editor/css/editormd.css}" rel="stylesheet"/>

    <link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon"/>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div id="layout">
    <header>
        <h1>MarkDown编辑器</h1>
    </header>
    <form action="markdownTest" method="post">
        <div id="test-editormd">
            <textarea style="display:none;" name="markdownContent"></textarea>
        </div>
        <button type="submit" class="btn btn-info col-md-offset-3 col-md-6">添加</button>
    </form>
</div>
<script th:src="@{/editor/js/jquery.min.js}"></script>
<script th:src="@{/editor/js/editormd.min.js}"></script>
<script th:src="@{/editor/lib/marked.min.js}"></script>
<script th:src="@{/editor/lib/prettify.min.js}"></script>
<script th:src="@{/editor/lib/raphael.min.js}"></script>
<script th:src="@{/editor/lib/underscore.min.js}"></script>
<script th:src="@{/editor/lib/sequence-diagram.min.js}"></script>
<script th:src="@{/editor/lib/flowchart.min.js}"></script>
<script th:src="@{/editor/lib/jquery.flowchart.min.js}"></script>
<script src="js/editormd.js"></script>
<script th:src="@{/editor/js/editormd.js}"></script>

<script type="text/javascript">
    var testEditor;

    $(function () {
        testEditor = editormd("test-editormd", {
            width: "90%",
            height: 640,
            syncScrolling: "single",
            path: "lib/",
            imageUpload: true,
            imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
            imageUploadURL: "/editor/imageUpload",
        });
    });
</script>
</body>
</html>

注意：将下载后解压完成的项目，static目录下所有文件拷贝到我们新建项目的静态资源目录下，然后更改页面中css，js的路径。不然会造成页面的报错，文档编辑器不能正常使用

注意：虽然目录中有些文件我们在页面中没引用到，如plugins目录下文件等，但是我们必须将文件一起赋值过来，不然在页面引用到的相关js中会有报错。

启动项目，打开我们的页面。效果如下：
在这里插入图片描述
测试图片上传功能：
上传后台接受代码：

@RequestMapping("imageUpload")
    public void imageUpload(@RequestParam(value = "editormd-image-file", required = true) MultipartFile file,
                            HttpServletRequest request, HttpServletResponse response){
        response.setCharacterEncoding("UTF-8");
        response.setContentType("text/html;charset=UTF-8");
        PrintWriter wirte = null;
        JSONObject json = new JSONObject();
        try {
            wirte = response.getWriter();
            //文件存放的路径
            String path = request.getSession().getServletContext().getRealPath("upload");
            String url = "http://localhost:8888"
                    + request.getContextPath()
                    + "//upload//"
                    + FileUpload.upload(request, file, path);
            json.put("success", 1);
            json.put("message", "hello");
            json.put("url", url);
        } catch (Exception e) {
        }finally{
            wirte.print(json);
            wirte.flush();
            wirte.close();
        }
        System.out.println("imageUpload");
    }

FileUpload文件处理类：

public class FileUpload {
    /*
     *图片上传工具类
     */
    public static String upload(HttpServletRequest request, MultipartFile file, String path) {
        String fileName = file.getOriginalFilename();
        fileName = UUID.randomUUID() + fileName.substring(fileName.indexOf("."), fileName.length());
        File targetFile = new File(path, fileName);
        //保存
        try {
            // 判断父级目录师父存在
            if (!targetFile.getParentFile().exists()) {
                targetFile.getParentFile().mkdirs();//创建父级文件路径
                targetFile.createNewFile();//创建文件
            }
            file.transferTo(targetFile);
        } catch (Exception e) {
            e.printStackTrace();
        }
        return fileName;
    }
}

最后将页面中图片上传的接口路径更改为我们后台编写好的：

$(function () {
        testEditor = editormd("test-editormd", {
            width: "90%",
            height: 640,
            syncScrolling: "single",
            path: "lib/",
            imageUpload: true,
            imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
            imageUploadURL: "/editor/imageUpload",
        });
    });

在这里插入图片描述
配置好后重新启动项目，进入页面中：

本地上传好我们的图片，点击确定即可：

我是王小贱

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
spring 整合editor.md 实现markdown 编辑demo

整合一个编辑器，其实很简单。首先找到他的源码，以editor.md 为例：Editor官方文档这里我写了一个小demo，可以下载参考：SpringBoot整合editor.md小案例下载将下载好的压缩包解压好，目录如下：自己创建一个SpringBoot项目，创建一个空白的页面。将解压后的index.jsp文件中的相关内容拷贝到我们的页面中。我的页面如下：<!DOCTYPE html><html lang="zh" xmlns:th="http://www.thymeleaf.
复制链接

扫一扫