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

更新时间：2018年03月26日 09:20:57 作者：Blog_龙飞

这篇文章主要介绍了SpringBoot使用Editor.md构建Markdown富文本编辑器示例,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

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

前言

Editor.md 是一款开源的、可嵌入的 Markdown 在线编辑器（组件），基于 CodeMirror、jQuery 和 Marked 构建。本章将使用SpringBoot整合Editor.md构建Markdown编辑器。

下载插件

项目地址：Editor.md

解压目录结构：

配置Editor.md

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

配置编辑器

......
 <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>

初始化编辑器

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编辑器，效果如下：

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

图片上传

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

@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字符串持久化到数据库中。具体在页面显示做法如下：

<!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

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

您可能感兴趣的文章:

Java实现控制小数精度的方法
这篇文章主要介绍了Java实现控制小数精度的方法,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-01-01
java实现文件打包压缩输出到浏览器下载
这篇文章主要介绍了java实现文件打包压缩输出到浏览器下载，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2021-11-11
JAVA工程中引用本地jar的3种常用简单方式
Jar文件的全称是Java Archive File即Java归档文件,主要是对class文件进行压缩,是一种压缩文件,和常见的zip压缩文件兼容,下面这篇文章主要给大家介绍了关于JAVA工程中引用本地jar的3种常用简单方式,需要的朋友可以参考下
2024-03-03
详解Java LinkedHashMap与HashMap的使用
这篇文章主要通过几个示例为大家详细介绍了Java中LinkedHashMap与HashMap的常见使用和概述，文中的示例代码讲解详细，感兴趣的小伙伴可以跟随小编一起学习一下
2022-10-10
Java线程池中的各个参数如何合理设置
这篇文章主要介绍了Java线程池中的各个参数如何合理设置操作，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2021-06-06
springboot jasypt2.x与jasypt3.x的使用方式
在软件开发中,将配置文件中的敏感信息(如数据库密码)进行加密是保障安全的有效手段,jasypt框架提供了这一功能,支持通过加密工具类或命令行工具生成密文,并通过修改配置文件和启动参数的方式使用密文和密钥,这样即便配置文件被泄露
2024-09-09
Java使用Optional实现优雅避免空指针异常
空指针异常（NullPointerException）可以说是Java程序员最容易遇到的问题了。为了解决这个问题，Java 8 版本中推出了 Optional 类，本文就来讲讲如何使用Optional实现优雅避免空指针异常吧
2023-03-03
mybatis如何处理返回结果集
这篇文章主要介绍了mybatis如何处理返回结果集问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-12-12
详解SpringBoot通用配置文件(不定时更新)
这篇文章主要介绍了SpringBoot通用配置文件详解(不定时更新),本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2021-03-03
MyBatis的mapper.xml文件中入参和返回值的实现
这篇文章主要介绍了MyBatis的mapper.xml文件中入参和返回值的实现方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-01-01

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

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具