SpringBoot使用Editor.md构建Markdown富文本编辑器示例

时间:2022-09-07 16:23:25

markdown是一种可以使用普通文本编辑器编写的标记语言,通过简单的标记语法,它可以使普通文本内容具有一定的格式。

前言

editor.md 是一款开源的、可嵌入的 markdown 在线编辑器(组件),基于 codemirror、jquery 和 marked 构建。本章将使用springboot整合editor.md构建markdown编辑器。

下载插件

项目地址:editor.md

解压目录结构:

SpringBoot使用Editor.md构建Markdown富文本编辑器示例

配置editor.md

将exapmles文件夹中的simple.html放置到项目中,并配置对应的css和js文件

配置编辑器

?
1
2
3
4
5
6
7
8
9
10
11
12
13
......
 <script src="${re.contextpath}/jquery.min.js"></script>
  <script src="${re.contextpath}/editor/editormd.min.js"></script>
  <link rel="stylesheet" href="${re.contextpath}/editor/css/style.css" rel="external nofollow" />
  <link rel="stylesheet" href="${re.contextpath}/editor/css/editormd.css" rel="external nofollow" rel="external nofollow" />
  <link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" rel="external nofollow" type="image/x-icon"/>
......
<!-- 存放源文件用于编辑 -->
 <textarea style="display:none;" id="textcontent" name="textcontent">
</textarea>
    <!-- 第二个隐藏文本域,用来构造生成的html代码,方便表单post提交,这里的name可以任意取,后台接受时以这个name键为准 -->
    <textarea id="text" class="editormd-html-textarea" name="text"></textarea>
  </div>

初始化编辑器

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var testeditor;
 
  $(function () {
    testeditor = editormd("test-editormd", {
      width: "90%",
      height: 640,
      syncscrolling: "single",
      path: "${re.contextpath}/editor/lib/",
      imageupload: true,
      imageformats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
      imageuploadurl: "/file",
      //这个配置在simple.html中并没有,但是为了能够提交表单,使用这个配置可以让构造出来的html代码直接在第二个隐藏的textarea域中,方便post提交表单。
      savehtmltotextarea: true
      // previewtheme : "dark"
    });
  });

这样就实现了最简单的editor.md编辑器,效果如下:

SpringBoot使用Editor.md构建Markdown富文本编辑器示例

访问地址:http://localhost:8080/

图片上传

由于在初始化编辑器中配置的图片上传地址为imageuploadurl: "/file",,与之对应,我们在/file处理文件上传即可

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
@restcontroller
@requestmapping("/file")
@slf4j
public class filecontroller {
 
//  @value("")
//  string folder = system.getproperty("user.dir")+file.separator+"upload"+file.separator;
  /**
   * 在配置文件中配置的文件保存路径
   */
  @value("${img.location}")
  private string folder;
 
  @postmapping
  public fileinfo upload(httpservletrequest request, @requestparam(value = "editormd-image-file", required = false) multipartfile file) throws exception {
    log.info("【filecontroller】 filename={},fileorginnmae={},filesize={}", file.getname(), file.getoriginalfilename(), file.getsize());
    log.info(request.getcontextpath());
    string filename = file.getoriginalfilename();
    string suffix = filename.substring(filename.lastindexof(".") + 1);
    string newfilename = new date().gettime() + "." + suffix;
 
    file localfile = new file(folder, newfilename);
    file.transferto(localfile);
    log.info(localfile.getabsolutepath());
    return new fileinfo(1, "上传成功", request.getrequesturl().substring(0,request.getrequesturl().lastindexof("/"))+"/upload/"+newfilename);
  }
 
  @getmapping("/{id}")
  public void download(@pathvariable string id, httpservletrequest request, httpservletresponse response) {
    try (inputstream inputstream = new fileinputstream(new file(folder, id + ".txt"));
       outputstream outputstream = response.getoutputstream();) {
      response.setcontenttype("application/x-download");
      response.setheader("content-disposition", "attachment;filename=test.txt");
 
      ioutils.copy(inputstream, outputstream);
      outputstream.flush();
    } catch (exception e) {
 
    }
  }
}

文件预览

表单post提交时,editor.md将我们的markdown语法文档翻译成了html语言,并将html字符串提交给了我们的后台,后台将这些html字符串持久化到数据库中。具体在页面显示做法如下:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!doctype html>
<html lang="zh">
<head>
  <meta charset="utf-8"/>
  <title>editor.md examples</title>
  <link rel="stylesheet" href="${re.contextpath}/editor/css/editormd.preview.min.css" rel="external nofollow" />
  <link rel="stylesheet" href="${re.contextpath}/editor/css/editormd.css" rel="external nofollow" rel="external nofollow" />
</head>
<body>
<!-- 因为我们使用了dark主题,所以在容器div上加上dark的主题类,实现我们自定义的代码样式 -->
<div class="content editormd-preview-theme" id="content">${editor.content!''}</div>
<script src="${re.contextpath}/jquery.min.js"></script>
<script src="${re.contextpath}/editor/lib/marked.min.js"></script>
<script src="${re.contextpath}/editor/lib/prettify.min.js"></script>
<script src="${re.contextpath}/editor/editormd.min.js"></script>
<script type="text/javascript">
  editormd.markdowntohtml("content");
</script>
</body>
</html>

预览地址:http://localhost:8080/editorweb/preview/{id}

编辑地址:http://localhost:8080/editorweb/edit/{id}

代码下载

从我的 github 中下载,https://github.com/longfeizheng/editor-markdown

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持服务器之家。

原文链接:https://longfeizheng.github.io/2018/03/15/SpringBoot使用Editor.md构建Markdown富文本编辑器