快捷導(dǎo)航

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

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

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

Markdown是一種可以使用普通文本編輯器編寫(xiě)的標(biāo)記語(yǔ)言，通過(guò)簡(jiǎn)單的標(biāo)記語(yǔ)法，它可以使普通文本內(nèi)容具有一定的格式。

前言

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

下載插件

項(xiàng)目地址：Editor.md

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

配置Editor.md

將exapmles文件夾中的simple.html放置到項(xiàng)目中，并配置對(duì)應(yīng)的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è)隱藏文本域，用來(lái)構(gòu)造生成的HTML代碼，方便表單POST提交，這里的name可以任意取，后臺(tái)接受時(shí)以這個(gè)name鍵為準(zhǔn) -->
    <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",
      //這個(gè)配置在simple.html中并沒(méi)有，但是為了能夠提交表單，使用這個(gè)配置可以讓構(gòu)造出來(lái)的HTML代碼直接在第二個(gè)隱藏的textarea域中，方便post提交表單。
      saveHTMLToTextarea: true
      // previewTheme : "dark"
    });
  });

這樣就實(shí)現(xiàn)了最簡(jiǎn)單的editor.md編輯器，效果如下：

訪問(wèn)地址：http://localhost:8080/

圖片上傳

由于在初始化編輯器中配置的圖片上傳地址為imageUploadURL: "/file",，與之對(duì)應(yīng)，我們?cè)?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) {

    }
  }
}

文件預(yù)覽

表單POST提交時(shí)，editor.md將我們的markdown語(yǔ)法文檔翻譯成了HTML語(yǔ)言，并將html字符串提交給了我們的后臺(tái)，后臺(tái)將這些HTML字符串持久化到數(shù)據(jù)庫(kù)中。具體在頁(yè)面顯示做法如下：

<!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>
<!-- 因?yàn)槲覀兪褂昧薲ark主題，所以在容器div上加上dark的主題類，實(shí)現(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>

預(yù)覽地址：http://localhost:8080/editorWeb/preview/{id}

編輯地址：http://localhost:8080/editorWeb/edit/{id}

代碼下載

從我的 github 中下載，https://github.com/longfeizheng/editor-markdown

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: