基于SSM或者springboot的Markdown编辑器的嵌入和图片的上传

最新推荐文章于 2022-11-15 10:19:11 发布

学号Java

最新推荐文章于 2022-11-15 10:19:11 发布

阅读量365

点赞数

分类专栏： markdown java 文章标签： 1024程序员节

本文链接：https://blog.csdn.net/qq_42147171/article/details/109257393

版权

java 同时被 2 个专栏收录

24 篇文章 0 订阅

订阅专栏

markdown

1 篇文章 0 订阅

订阅专栏

文章目录

基于SSM或者springboot的Markdown编辑器的嵌入和图片的上传

基于SSM或者springboot的Markdown编辑器的嵌入和图片的上传

1.Markdown编辑器的嵌入

这里我使用的是editormd这个插件，下载的话大家可以去github找一找。这里我就说一说配置。

<html lang="zh">
<head>
    <meta charset="utf-8" />
    <title>Belif's Blog</title>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <link rel="stylesheet" type="text/css" href="../editormd/css/editormd.css" />
    <!-- 这里必须先引入jquery -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script> -->
    <script src="../editormd/examples/js/jquery.min.js"></script>
    <!-- 引入js -->
    <script src="../editormd/editormd.min.js"></script>
    <script type="text/javascript">
        //初始化Markdown编辑器
        var contentEditor;
        $(function() {
            contentEditor = editormd("md-content", {
                width: "100%", //宽度
                height: 1000, //高度
                theme: "gray",
                syncScrolling: "single", //单滚动条
                path: "../editormd/lib/", //依赖的包路径
                // previewTheme : "dark",
                markdown: "", //重置md内的文本
                // editorTheme: "pastel-on-dark",
                codeFold: true,
                tex: true, // 开启科学公式TeX语言支持，默认关闭
                flowChart: true, // 开启流程图支持，默认关闭
                sequenceDiagram: true, // 开启时序/序列图支持，默认关闭,
                tocm            : true,         // Using [TOCM]
                imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
                saveHTMLToTextarea : true,    // 保存 HTML 到 Textarea
                toolbarIcons: function() { //自定义工具栏，后面有详细介绍
                    return editormd.toolbarModes['full']; // full, simple, mini
                },
                //           //syncScrolling : false,
                //           searchReplace : true,
                //           //watch : false,                // 关闭实时预览
                //           htmlDecode : "style,script,iframe|on*",            // 开启 HTML 标签解析，为了安全性，默认不开启
                //           //toolbar  : false,             //关闭工具栏
                //           //previewCodeHighlight : false, // 关闭预览 HTML 的代码块高亮，默认开启
                //           emoji : true,
                //           taskList : true,
                //           //dialogLockScreen : false,   // 设置弹出层对话框不锁屏，全局通用，默认为true
                //           //dialogShowMask : false,     // 设置弹出层对话框显示透明遮罩层，全局通用，默认为true
                //           //dialogDraggable : false,    // 设置弹出层对话框不可拖动，全局通用，默认为true
                //           //dialogMaskOpacity : 0.4,    // 设置透明遮罩层的透明度，全局通用，默认值为0.1
                //           //dialogMaskBgColor : "#000", // 设置透明遮罩层的背景颜色，全局通用，默认为#fff
                imageUpload: true,
                imageUploadURL: "/uploadImg",
                onload: function() {
                    console.log('onload', this);
                    //this.fullscreen();
                    //this.unwatch();
                    //this.watch().fullscreen();
                    //this.setMarkdown("#PHP");
                    //this.width("100%");
                    //this.height(480);
                    //this.resize("100%", 640);
                }
            });
            // $("input[name='digest']").val(contentEditor.getMarkdown());

            //   contentEditor.gotoLine(90);//转到第90行
            //   contentEditor.show();//显示编辑器
            //   contentEditor.hide();//隐藏编辑器
            //   alert(contentEditor.getMarkdown());//获取编辑器内容（不含html）
            //  alert(contentEditor.getHTML());//获取编辑器html内容
            //  contentEditor.watch();//开启双窗口对比
            //  contentEditor.unwatch();//取消双窗口对比
            //  contentEditor.previewing();//预览效果
            //  contentEditor.fullscreen();//全屏（按ESC取消）
            // contentEditor.showToolbar();//显示工具栏
            //  contentEditor.hideToolbar();//隐藏工具栏
            // contentEditor.config("tocDropdown", false); //TOC默认
            // contentEditor.config({
            //     tocDropdown: true
            //     // tocTitle      : "目录 Table of Contents"
            // }); //TOC下拉菜单
        });

        var reg=/\\|\/|\?|\？|\#|\*|\"|\“|\”|\'|\‘|\’|\<|\>|\{|\}|\[|\]|\【|\】|\：|\:|\、|\^|\$|\!|\~|\`|\|/g;
        function ExportData() {//
            //传参到form表单隐藏的input标签里面去
            $("input[name='status']").val(0);//草稿和发布的两个状态
            // console.log($("input[name='status']").val()+""+$("input[name='btitle']").val());

            $("input[name='digest']").val(contentEditor.getMarkdown().substr(0,200).replace(reg,""));
            console.log( $("input[name='digest']").val());
            // form表单提交
            document.getElementById("exportForm").submit();
        }

        function publish() {
 //如果没有概要的输入可以这么做，自动获取文章的前多少作为概要，           						        $("input[name='digest']").val(contentEditor.getMarkdown().substr(0,200).replace(reg,""));
            document.getElementById("exportForm").submit();
        }
    </script>
</head>
<body style="margin: 0; padding: 0;">
<div >
    <form id="exportForm" action="/commit" enctype="multipart/form-data" method="post">
        <div  style="width:100%; float: left;height:45px ;">
            <div style="line-height: 45px;width: 100%;">
                <a style="text-decoration: none;color: #000000;width: 4%;" href="/allblog">〈 文章管理</a>
                <input type="text" name="btitle" style="height: 25px;width:83%;min-width:20% ;" placeholder="欢迎使用markdown编辑器!"/>
                <input type="text" name="status" style="display: none" value="1">
                <input type="button" style="line-height:30px;border: 1px red solid;border-radius: 4px;width: 5%;" value="保存草稿" onclick="ExportData()"/>
                <input type="button" style="width: 5%;line-height:30px;background-color: red;border: 0px ;border-radius: 4px;color: #FFFFFC;" value="发布博客" onclick="publish()"/>
            </div>

        </div>
        <input name="digest" value="" type="text" style="display: none">
        <div id="md-content" style="z-index: 1 !important;width: 100%;">
            <textarea id="my-editormd-markdown-doc" name="my-editormd-markdown-doc" style="display:none;"></textarea>
            <!-- 用于后端获取md稳当内容，Java中：request.getParameter("my-editormd-html-code")。 -->
            <textarea id="my-editormd-html-code" name="bcontext" style="display:none;"></textarea>
        </div>
    </form>

    <!-- <textarea class="editormd-html-textarea" name="html"></textarea> -->
</div>

</body>
</html>

下面说说怎么上传图片，上面里也有设置，照着改，下面是后端的代码（插件自带的上传图片的功能）

2.Markdown编辑器的图片的上传

2.1 java后台的操作

 @RequestMapping(value = "/uploadImg", method = RequestMethod.POST)
    @ResponseBody
    public String uploadFile(HttpServletRequest request, HttpServletResponse response,
                             @RequestParam(value = "editormd-image-file", required = false) MultipartFile attach){
        JSONObject jsonObject=new JSONObject();

        try {
            request.setCharacterEncoding("utf-8");
            response.setHeader("Content-Type", "text/html");
            String rootPath = request.getSession().getServletContext().getRealPath("/resource/img");

            System.out.println("editormd上传图片："+rootPath);

            /**
             * 文件路径不存在则需要创建文件路径
             */
            File filePath = new File(rootPath);
            if (!filePath.exists()) {
                filePath.mkdirs();
            }

            // 最终文件名
            File realFile = new File(rootPath + File.separator + attach.getOriginalFilename());
            Files.copy(attach.getInputStream(),realFile.toPath());
            //FileUtils.copyInputStreamToFile(attach.getInputStream(), realFile);

            // 下面response返回的json格式是editor.md所限制的，规范输出就OK
            jsonObject.put("success", 1);
            jsonObject.put("message", "上传成功");
            jsonObject.put("url", "/resource/img/"+attach.getOriginalFilename());
            System.out.println("attach.getOriginalFilename()");//其实这种不是很好，重名会覆盖建议大家加一个UUID,避免重复
        } catch (Exception e) {
            jsonObject.put("success", 0);
        }
        return jsonObject.toString();
    }

2.2 spring中的配置

<bean class="org.springframework.web.multipart.commons.CommonsMultipartResolver" id="multipartResolver">
<property value="utf-8" name="defaultEncoding"/>

<property value="20000000" name="maxUploadSize"/>

<property value="40960" name="maxInMemorySize"/>
</bean>

3.解析md格式文章到前端显示为html

<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020/9/22 0022
  Time: 15:06
  To change this template use File | Settings | File Templates.
--%>
<html>
<head>
    <meta charset="utf-8">
    <title>Belif's Blog</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../layui/css/definecss/BlogHome.css" media="all">
    <script type="text/javascript" src="../layui/layui.js"></script>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <link rel="stylesheet" type="text/css" href="../editormd/css/editormd.css"/>
    <script src="../editormd/examples/js/jquery.min.js"></script>
    <!-- 引入js -->
    <link rel="stylesheet" href="../editormd/css/editormd.preview.css"/>
    <script src="../editormd/lib/prettify.min.js"></script>
    <script src="../editormd/lib/marked.min.js"></script>
    <script src="../editormd/editormd.min.js"></script>
    <script src="../editormd/lib/raphael.min.js"></script>
    <script src="../editormd/lib/underscore.min.js"></script>
    <script src="../editormd/lib/sequence-diagram.min.js"></script>
    <script src="../editormd/lib/flowchart.min.js"></script>
    <script src="../editormd/lib/jquery.flowchart.min.js"></script>
    <script>
        layui.use('element', function () {
            var element = layui.element;
        });
        var testEditor;
        $(function () {
            testEditor = editormd.markdownToHTML("doc-content", {//注意：这里是上面DIV的id
                htmlDecode: "style,script,iframe",
                emoji: true,
                taskList: true,
                tocm: true,
                tocTitle: "目录",
                tex: true, // 默认不解析
                flowChart: true, // 默认不解析
                sequenceDiagram: true, // 默认不解析
                codeFold: true
            });
        });

    </script>
</head>
<body style="overflow: auto;min-width:1800px;">
    <!--省略了部分代码只有显示部分-->
                            <div class="layui-card-header" style="line-height: 24px!important;height: 24px;width: 95%">
                                <span class="showone">${blog.btitle}</span>
                            </div>
                            <div class="layui-card-body" style="padding:5px 10px;overflow-x:hidden; overflow-y:scroll;height:1230px!important;">
                                <div id="doc-content"  name="doc-content">
                                    <!-- 书写与实时显示的textarea -->
                                    <textarea placeholder="markdown语言">${blog.bcontext}</textarea>
                                </div>
                            </div>
                        </div>
</body>
</html>