SpringBoot使用Editor.md構(gòu)建Markdown富文本編輯器示例

更新時間：2018年03月26日 09:20:57 作者：Blog_龍飛

這篇文章主要介紹了SpringBoot使用Editor.md構(gòu)建Markdown富文本編輯器示例,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

Markdown是一種可以使用普通文本編輯器編寫的標記語言，通過簡單的標記語法，它可以使普通文本內(nèi)容具有一定的格式。

前言

Editor.md 是一款開源的、可嵌入的 Markdown 在線編輯器（組件），基于 CodeMirror、jQuery 和 Marked 構(gòu)建。本章將使用SpringBoot整合Editor.md構(gòu)建Markdown編輯器。

下載插件

項目地址：Editor.md

解壓目錄結(jié)構(gòu)：

配置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"  rel="external nofollow" type="image/x-icon"/>
......
<!-- 存放源文件用于編輯 -->
 <textarea style="display:none;" id="textContent" name="textContent">
</textarea>
    <!-- 第二個隱藏文本域，用來構(gòu)造生成的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中并沒有，但是為了能夠提交表單，使用這個配置可以讓構(gòu)造出來的HTML代碼直接在第二個隱藏的textarea域中，方便post提交表單。
      saveHTMLToTextarea: true
      // previewTheme : "dark"
    });
  });

這樣就實現(xiàn)了最簡單的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字符串持久化到數(shù)據(jù)庫中。具體在頁面顯示做法如下：

<!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的主題類，實現(xiàn)我們自定義的代碼樣式 -->
<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

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

Java實現(xiàn)控制小數(shù)精度的方法
這篇文章主要介紹了Java實現(xiàn)控制小數(shù)精度的方法,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2021-01-01
java實現(xiàn)文件打包壓縮輸出到瀏覽器下載
這篇文章主要介紹了java實現(xiàn)文件打包壓縮輸出到瀏覽器下載，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
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線程池中的各個參數(shù)如何合理設置
這篇文章主要介紹了Java線程池中的各個參數(shù)如何合理設置操作，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2021-06-06
springboot jasypt2.x與jasypt3.x的使用方式
在軟件開發(fā)中,將配置文件中的敏感信息(如數(shù)據(jù)庫密碼)進行加密是保障安全的有效手段,jasypt框架提供了這一功能,支持通過加密工具類或命令行工具生成密文,并通過修改配置文件和啟動參數(shù)的方式使用密文和密鑰,這樣即便配置文件被泄露
2024-09-09
Java使用Optional實現(xiàn)優(yōu)雅避免空指針異常
空指針異常（NullPointerException）可以說是Java程序員最容易遇到的問題了。為了解決這個問題，Java?8?版本中推出了?Optional?類，本文就來講講如何使用Optional實現(xiàn)優(yōu)雅避免空指針異常吧
2023-03-03
mybatis如何處理返回結(jié)果集
這篇文章主要介紹了mybatis如何處理返回結(jié)果集問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-12-12
詳解SpringBoot通用配置文件(不定時更新)
這篇文章主要介紹了SpringBoot通用配置文件詳解(不定時更新),本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2021-03-03
MyBatis的mapper.xml文件中入?yún)⒑头祷刂档膶崿F(xiàn)
這篇文章主要介紹了MyBatis的mapper.xml文件中入?yún)⒑头祷刂档膶崿F(xiàn)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-01-01