SpringMVC(五)：EditorMD编辑器开发与文件上传

最新推荐文章于 2024-08-08 07:56:57 发布

星尘Pro

最新推荐文章于 2024-08-08 07:56:57 发布

阅读量2.9k

点赞数 1

分类专栏： Spring 文章标签： springMVC editormd markdown java 编辑器

本文链接：https://blog.csdn.net/Sirius_hly/article/details/81709370

版权

本文介绍了如何在SpringMVC项目中集成EditorMD编辑器，详细阐述了编辑器的配置、图片上传设置，以及如何在后端处理Markdown内容和文件上传，包括解决图片预览问题的解决方案。

摘要由CSDN通过智能技术生成

一.EditorMD编辑器的使用

1.1editor编辑器介绍

支持“标准”Markdown / CommonMark和Github风格的语法，也可变身为代码编辑器；
支持实时预览、图片（跨域）上传、预格式文本/代码/表格插入、代码折叠、搜索替换、只读模式、自定义样式主题和多语言语法高亮等功能；
支持ToC（Table of Contents）、Emoji表情、Task lists、@链接等Markdown扩展语法；
支持TeX科学公式（基于KaTeX）、流程图 Flowchart 和时序图 Sequence Diagram;
支持识别和解析HTML标签，并且支持自定义过滤标签解析，具有可靠的安全性和几乎无限的扩展性；
支持 AMD / CMD 模块化加载（支持 Require.js & Sea.js），并且支持自定义扩展插件；
兼容主流的浏览器（IE8+）和Zepto.js，且支持iPad等平板设备；

1.2.下载editor编辑器

官网:https://pandao.github.io/editor.md/index.html

1.3.下载完成后

这是目录信息，找到examples目录，里面有个simple.html文件，只需要改动这个文件就可以使用

1.4.更改配置

这是笔者下载后修改过后的配置

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8"/>
    <title>Simple example - Editor.md examples</title>
    <link rel="stylesheet" href="css/style.css"/>
    <link rel="stylesheet" href="../css/editormd.css"/>
    <link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon"/>
</head>
<body>
<div id="layout">
    <header>
        <h1>Simple example</h1>
    </header>
    <div id="test-editormd">
        <textarea style="display:none;"></textarea>
        <textarea class="editor-md-html" name="editor-md-html"></textarea>
    </div>
</div>
<script src="js/jquery.min.js"></script>
<script src="../editormd.min.js"></script>
<script type="text/javascript">
    var testEditor;

    $(function () {
        testEditor = editormd("test-editormd", {
            width: "70%",//编辑器大小官方默认90%
            height: 640,
            syncScrolling: "single",
            path: "../lib/",//这个编辑器文件的lib路径
            saveHTMLToTextarea : true,//注意3：这个配置，textarea可以提交

            emoji: true,//emoji表情，默认关闭
            /**上传图片相关配置如下*/
            imageUpload : true,
            imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
            imageUploadURL : "/editorMDUpload",//注意你后端的上传图片服务地址
            
            //editorTheme: "pastel-on-dark",//编辑器的主题颜色
            theme: "gray",//顶部的主题
            previewTheme: "dark"//显示的主题

            //editor.md期望得到一个json格式的上传后的返回值，格式是这样的：
            /*
            {
                success : 0 | 1,           // 0 表示上传失败，1 表示上传成功
                message : "提示的信息，上传成功或上传失败及错误信息等。",
                url     : "图片地址"        // 上传成功时才返回
            }
            */

        });

        /*
        // or
        testEditor = editormd({
            id      : "test-editormd",
            width   : "90%",
            height  : 640,
            path    : "../lib/"
        });
        */
    });
</script>
</body>
</html>

1.5.图片上传

这是图片上传的前端配置，如上代码中的一样

imageUpload : true,
            imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
            imageUploadURL : "/editorMDUpload",//注意你后端的上传图片服务地址

1.6.SpringMVC文件上传

为了试下动态上传，笔者后台使用的是java SpringMVC框架，以下是修改后的jsp代码

<%--
  Created by IntelliJ IDEA.
  User: hly
  Date: 2018/8/15
  Time: 16:17
  github :github.com/SiriusHly
  blog :blog.csdn.net/Sirius_hly
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<% String path = request.getContextPath();%>
<html lang="zh">
<head>
    <meta charset="utf-8"/>
    <title>Simple example - Editor.md examples</title>
    <link rel="stylesheet" href="<%=path%>/static/html/editor/editor.md-master/examples/css/style.css"/>
    <link rel="stylesheet" href="<%=path%>/static/html/editor/editor.md-master/css/editormd.css"/>
    <link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon"/>
</head>
<body>
<div id="layout">
    <header>
        <h1>Simple example</h1>
    </header>
    <div id="test-editormd">
        <textarea style="display:none;"></textarea>
        <textarea class="editor-md-html" name="editor-md-html"></textarea>
    </div>
</div>
<script src="<%=path%>/static/ht