使用editor_md支持markdown组件以及其中的图片上传功能

最新推荐文章于 2024-05-17 11:00:17 发布

nb7474

最新推荐文章于 2024-05-17 11:00:17 发布

阅读量9.8k

点赞数 8

分类专栏：前端学习插件

本文链接：https://blog.csdn.net/nb7474/article/details/80833198

版权

前端学习同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

插件

7 篇文章 0 订阅

订阅专栏

一、editor.md的下载与安装

下载地址
安装使用

里面有多个文件夹，在引入的时候，我们不需要examples示例、docs、tests等文件夹。
引用完毕后目录：
我也试过指引用css和js文件，页面只会显示大概的内容，但是功能不能使用，如字体图标，引用图片上传等插件都不可以使用。

二、html页面

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>新建blog</title>
<%@ include file="../common/static.jsp"%>
<c:set var="path" value="${pageContext.request.contextPath}" scope="request"></c:set>
<script src="<%=request.getContextPath()%>/static/editormd/src/editormd.js"></script>
<link rel="stylesheet" href="<%=request.getContextPath()%>/static/editormd/css/editormd.min.css" />
</head>
<body>
    <%@include file="../common/head.jsp"%>
    <div class="container">
        <button class="btn btn-primary" style="margin-bottom: 2px;">发表博客</button>
        <div class="editormd" id="test-editormd">  
            <textarea class="editormd-markdown-textarea" name="test-editormd-markdown-doc"></textarea>  
            <!-- 第二个隐藏文本域，用来构造生成的HTML代码，方便表单POST提交，这里的name可以任意取，后台接受时以这个name键为准 -->  
            <textarea class="editormd-html-textarea" name="text"></textarea>  
        </div>

    </div>
</body>
</html>

html部分的代码并没有什么重要的地方，引入js和css以及定义两个textarea区域，一个用于编辑，一个隐藏文本域用于构造生成的html代码，方便表单提交。

三、js代码

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

$(function() {
    testEditor = editormd("test-editormd", {
        width   : "100%",
        height  : 640,
        syncScrolling : "single",
        path    : "<%=request.getContextPath()%>/static/editormd/lib/",
        imageUpload : true,
        imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],  
        imageUploadURL : "uploadfile",  
        saveHTMLToTextarea : true,
    });

});
</script>

js部分需要注意的是引入lib包和图片上传的功能。

引入lib包
引入lib包的时候只是需要注意以下路径，具体路径可以和css/js引入时候相同。
../表示父级目录，
./表示根级目录

图片上传功能

使用图片上传功能首先要设置imageUpload : true。

这里写图片描述

不设置此属性，添加图片中没有本地上传的功能。

imageUploadURL属性对应后台接收上传的图片字节码的处理action。
controller代码：

@ResponseBody
    @RequestMapping(value = "/uploadfile", method = RequestMethod.POST)
    public JSONObject hello(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("/static/img/blog/");

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

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

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

            // 下面response返回的json格式是editor.md所限制的，规范输出就OK

            jsonObject.put("success", 1);
            jsonObject.put("message", "上传成功");
            jsonObject.put("url", "/MyPage/static/img/blog/"+attach.getOriginalFilename());
        } catch (Exception e) {
            jsonObject.put("success", 0);
        }

        return jsonObject;
    }

rootpath是期望在项目的根目录下希望上传的图片存放的位置。
其中需要注意的是后台传递到前台的路径，此路径是用于预览窗口中找到图片并显示的。相当在预览窗口中有一个<img src="" />标签，这个路径要拼接到src中用于定位图片的位置。
在使用editor.md的时候，参考了这篇博客，他在后台中的关于传递回去的url是这样定义的：

String rootPath = request.getSession().getServletContext().getRealPath("/resources/upload/");
response.getWriter().write( "{\"success\": 1, \"message\":\"上传成功\",\"url\":\"/resources/upload/" + attach.getOriginalFilename() + "\"}" );

我在使用这种方式传递url回去的时候遇到了如下错误：

传递回去的json格式的url，editor.md组件识别不了。后来我改用@responsebody注解，并返回jsonobject的参数，不再报此错误。
传递回去的路径在控制台报错找不到此图片或者说没有权限访问此图片。
没有权限访问是因为我修改了路径，传递回去的url=rootpath+"/"+attach.getOriginalFilename().此路径为图片在电脑中存放的位置，很明显在web项目中是不允许这样访问的。
找不到图片的错误：http://localhost:8080/static/img/blog路径找不到，很明显这个路径缺少了一个根目录，我这个项目的根目录是MyPage。这时候再看后台代码，发现我误解了参考博客的意思，以为传回去的url要和rootpath中定义的路径保持一致。其实不是这样，所以在传回去的url中加了项目的根目录名，就找到了图片。

四、成功页面展示

这里写图片描述

如果返回的url错误，在右边预览时看不到图片的。

nb7474

关注

8
点赞
踩
24

收藏

觉得还不错? 一键收藏
12
评论
使用editor_md支持markdown组件以及其中的图片上传功能

一、editor.md的下载与安装下载地址安装使用里面有多个文件夹，在引入的时候，我们不需要examples示例、docs、tests等文件夹。引用完毕后目录：我也试过指引用css和js文件，页面只会显示大概的内容，但是功能不能使用，如字体图标，引用图片上传等插件都不可以使用。二、html页面&lt;%@ page language="java" conte...
复制链接

扫一扫

专栏目录