怎么在SpringBoot中使用Editor.md構(gòu)建一個Markdown富文本編輯器

怎么在SpringBoot中使用Editor.md構(gòu)建一個Markdown富文本編輯器？相信很多沒有經(jīng)驗(yàn)的人對此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個問題。

創(chuàng)新互聯(lián)建站主要業(yè)務(wù)有網(wǎng)站營銷策劃、成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)、微信公眾號開發(fā)、小程序設(shè)計(jì)、H5響應(yīng)式網(wǎng)站、程序開發(fā)等業(yè)務(wù)。一次合作終身朋友，是我們奉行的宗旨；我們不僅僅把客戶當(dāng)客戶，還把客戶視為我們的合作伙伴，在開展業(yè)務(wù)的過程中，公司還積累了豐富的行業(yè)經(jīng)驗(yàn)、營銷型網(wǎng)站資源和合作伙伴關(guān)系資源，并逐漸建立起規(guī)范的客戶服務(wù)和保障體系。

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

下載插件

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

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

怎么在SpringBoot中使用Editor.md構(gòu)建一個Markdown富文本編輯器

配置Editor.md

將exapmles文件夾中的simple.html放置到項(xiàng)目中，并配置對應(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" href="https://pandao.github.io/editor.md/favicon.ico" rel="external nofollow" type="image/x-icon"/>
......
<!-- 存放源文件用于編輯 -->
 <textarea  id="textContent" name="textContent">
</textarea>
    <!-- 第二個隱藏文本域，用來構(gòu)造生成的HTML代碼，方便表單POST提交，這里的name可以任意取，后臺接受時以這個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",
      //這個配置在simple.html中并沒有，但是為了能夠提交表單，使用這個配置可以讓構(gòu)造出來的HTML代碼直接在第二個隱藏的textarea域中，方便post提交表單。
      saveHTMLToTextarea: true
      // previewTheme : "dark"
    });
  });

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

怎么在SpringBoot中使用Editor.md構(gòu)建一個Markdown富文本編輯器

訪問地址：http://localhost:8080/

圖片上傳

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

看完上述內(nèi)容，你們掌握怎么在SpringBoot中使用Editor.md構(gòu)建一個Markdown富文本編輯器的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

文章標(biāo)題：怎么在SpringBoot中使用Editor.md構(gòu)建一個Markdown富文本編輯器
當(dāng)前路徑：http://muchs.cn/article18/pppidp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站建設(shè)、面包屑導(dǎo)航、網(wǎng)站收錄、全網(wǎng)營銷推廣、網(wǎng)頁設(shè)計(jì)公司、搜索引擎優(yōu)化

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容