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

一、editor.md的下载与安装

  • 下载地址
  • 安装使用

    使用editor_md支持markdown组件以及其中的图片上传功能_第1张图片
    里面有多个文件夹,在引入的时候,我们不需要examples示例、docs、tests等文件夹。
    引用完毕后目录:
    使用editor_md支持markdown组件以及其中的图片上传功能_第2张图片

  • 我也试过指引用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"%>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>新建blogtitle>
<%@ 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>  
              
            <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引入时候相同。
    ../表示父级目录,
    ./表示根级目录

  • 图片上传功能

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

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

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

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

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

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

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

四、成功页面展示

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

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

你可能感兴趣的:(前端学习,插件)