首頁 > 軟體

一款功能強大的markdown編輯器tui.editor使用範例詳解

2023-02-24 06:02:35

簡介

最近在捯飭自己的個人網站，想找一款類似於掘金的markdown編輯器，主要訴求包含實時預覽、語法高亮、自動生成目錄索引。對比了市面上主流的幾款編輯器，最後採用了@toast-ui/editor。選擇的主要原因就是開箱即用，內建一些實用的外掛，如表格並且支援合併單元格、語法高亮、圖形展示、uml繪製等；支援自定義外掛擴充套件，因為這款編輯器是基於prosemirror，前身即codemirror，編輯器本身是偏底層的，提供了豐富的api供我們自定義開發，這也大大增強了編輯器的靈活性，如果想加一個目錄索引，我們完全可以自定義開發一個外掛使用。

在初次使用過程中，也遇到一些注意點，本文以vue3為例，簡單介紹@toast-ui/editor的使用過程。

安裝使用

安裝

npm install @toast-ui/editor -S

初始化

import Editor from '@toast-ui/editor'
import '@toast-ui/editor/dist/toastui-editor.css'
import '@toast-ui/editor/dist/i18n/zh-cn';
export default {
    mounted () {
      const editor = new Editor({
        el: this.$refs.editor,
        language: 'zh-CN',
        initialEditType: 'markdown',
        previewStyle: 'vertical',
      });
    }
  }

通過以上兩步，我們就能得到一個簡易的編輯器了，如下圖所示：

顯然我們的目的不僅如此，markdown編輯器還缺少語法高亮、目錄欄，接下來我們看下如何擴充套件tui

官方外掛

官方內建了以下外掛：

外掛名稱用途
@toast-ui/editor-plugin-chart圖形渲染
@toast-ui/editor-plugin-code-syntax-highlight語法高亮
@toast-ui/editor-plugin-color-syntax文字新增顏色
@toast-ui/editor-plugin-table-merged-cell合併單元格
@toast-ui/editor-plugin-uml渲染UML

接下來我們設定程式碼語法高亮。

  • 安裝外掛
npm install @toast-ui/editor-plugin-code-syntax-highlight
  • 使用
import 'prismjs/themes/prism.css';
import '@toast-ui/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight.css';
import Editor from '@toast-ui/editor';
// 支援所有語言語法高亮
import codeSyntaxHighlight from '@toast-ui/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight-all.js';
const editor = new Editor({
  // ...
  plugins: [codeSyntaxHighlight]
});

功能拓展

目前編輯器包含了語法高亮，如果需要新增目錄索引，可以監聽檔案編輯的change事件，獲取markdown檔案內容，通過正規表示式解析即可。具體實現如下：

const editor = new Editor({
  // ...
  events: {
    change: this.handleContentChange.bind(this)
  },
});
methods: {
  handleContentChange () {
    const mdText = this.editor.mdEditor.getMarkdown()
    this.parseMdTitle(mdText)
  },
  parseMdTitle (mdText) { // 解析markdown title
    const pattern = /^(#+)s+(.+)/mg
    let result = mdText.match(pattern)
    if (!result) return
    const catalogList = result.map((vv, index) => {
      const levelText = vv.match(/^(#+)/)
      return {
        level: levelText[0].length, // 目錄級別
        index,
        cls: `heading-${levelText[0].length}`,
        content: vv.slice(levelText[0].length).trim(), // 內容
      }
    })
    this.catalogList = catalogList
  }
}

以上僅僅是一些基礎的使用。markdown基礎語法無法滿足我們需要時、需要手動修改渲染樣式等需求，tui.editor也提供相應的能力。如需要修改標題的預設渲染樣式，我們可以使用customHTMLRenderer，這一塊官方檔案較少，可以從原始碼看出預設書寫規則，內建schema位置詳見原始碼libstoastmarksrchtmlbaseConvertors.ts。

new Editor({
  // ...
  customHTMLRenderer: {
    heading (node, { entering }) {
      const spec = {
        type: entering ? 'openTag' : 'closeTag',
        tagName: `h${node.level}`,
        outerNewLine: true,
      };
      // 給每個header新增class
      if (entering) spec.attributes = {
        'class': `heading${node.level}`
      }
      return spec
    }
  }
})

最新3.0版本的編輯器是基於Prosemirror，有興趣的小夥伴可以去看下，功能十分強大，也是level1級富文字編輯器的典型代表。

編輯器最終效果圖如下：

實現原始碼

<template>
  <div class="full">
    <div class="markdown-editor" ref="editor"></div>
    <div class="catalog-container" v-if="catalogList.length > 0">
      <div class="catalog-title">目錄</div>
      <template v-for="(item, index) in catalogList" :key="index">
        <div class="catalog-item" :class="item.cls">
          <a :href="'#heading' + (index + 1)" rel="external nofollow" >{{item.content}}</a>
        </div>
      </template>
    </div>
  </div>
</template>
<script>
  import Editor from '@toast-ui/editor'
  import '@toast-ui/editor/dist/toastui-editor.css'
  import '@toast-ui/editor/dist/i18n/zh-cn';
  import 'prismjs/themes/prism.css';
  import '@toast-ui/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight.css';
  import codeSyntaxHighlight from '@toast-ui/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight-all.js';
  import '@toast-ui/editor-plugin-table-merged-cell/dist/toastui-editor-plugin-table-merged-cell.css';
  import tableMergedCell from '@toast-ui/editor-plugin-table-merged-cell';
  export default {
    data () {
      return {
        catalogList: []
      }
    },
    mounted () {
      this.editor = new Editor({
        el: this.$refs.editor,
        language: 'zh-CN',
        initialEditType: 'markdown',
        previewStyle: 'vertical',
        placeholder: '請輸入內容',
        plugins: [codeSyntaxHighlight, tableMergedCell],
        events: {
          change: this.handleContentChange.bind(this)
        },
        customHTMLRenderer: {
          heading (node, { entering }) {
            const spec = {
              type: entering ? 'openTag' : 'closeTag',
              tagName: `h${node.level}`,
              outerNewLine: true,
            };
            // 新增自定義屬性
            if (entering) spec.attributes = {
              'class': `heading${node.level}`
            }
            return spec
          }
        }
      })
    },
    methods: {
      handleContentChange () {
        const mdText = this.editor.mdEditor.getMarkdown()
        this.parseMdTitle(mdText)
      },
      parseMdTitle (mdText) { // 解析markdown title
        const pattern = /^(#+)s+(.+)/mg
        let result = mdText.match(pattern)
        if (!result) return
        const catalogList = result.map((vv, index) => {
          const levelText = vv.match(/^(#+)/)
          return {
            level: levelText[0].length, // 目錄級別
            index,
            cls: `heading-${levelText[0].length}`,
            content: vv.slice(levelText[0].length).trim(), // 內容
          }
        })
        this.catalogList = catalogList
      }
    }
  }
</script>
<style scoped>
  .full {
    position: relative
  }
  .catalog-container {
    box-sizing: border-box;
    position: absolute;
    right: 0;
    bottom: 32px;
    width: 200px;
    height: 300px;
    padding: 16px 0;
    background-color: rgba(255, 255, 255, .65);
    border: 1px solid #ccc;
    border-radius: 4px;
  }
  .catalog-title {
    text-align: center;
    padding-bottom: 12px;
  }
  .catalog-item {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 4px 8px;
    font-size: 14px;
    user-select: none;
  }
  .catalog-item a {
    color: rgba(0, 0, 0, .65);
    text-decoration: none;
  }
  .heading-2 {
    padding-left: 24px;
  }
  .heading-3 {
    padding-left: 48px;
  }
  .catalog-item a:hover {
    color: cadetblue;
  }
  .markdown-editor {
    height: 100% !important;
    background: #fff;
    border-radius: 4px;
  }
</style>

參考資料

以上就是一款功能強大的markdown編輯器tui.editor使用範例詳解的詳細內容，更多關於markdown編輯器tui.editor的資料請關注it145.com其它相關文章！


相關文章

  • 德漢姆中學就讀條件 德漢姆中學就讀條件

    <em>Mac</em>Book项目 2009年学校开始实施<em>Mac</em>Book项目,所有师生配备一本<em>Mac</em>Book,并同步更新了校园无线网络。学校每周进行电脑技术更新,每月发送技术支持资料,极大改变了教学及学习方式。因此2011

    2021-06-01 09:32:01

  • 黑科技的輕簡出行，告別「電量焦慮症」：Anker氮化鎵超能充系列 黑科技的輕簡出行，告別「電量焦慮症」：Anker氮化鎵超能充系列

    综合看Anker超能充系列的性价比很高，并且与不仅和iPhone12/苹果<em>Mac</em>Book很配，而且适合多设备充电需求的日常使用或差旅场景，不管是安卓还是Switch同样也能用得上它，希望这次分享能给准备购入充电器的小伙伴们有所

    2021-06-01 09:31:42

  • 吳亦凡廠牌首秀，L4WUDU居然忘詞了，Rapper和明星比還是有差距！ 吳亦凡廠牌首秀，L4WUDU居然忘詞了，Rapper和明星比還是有差距！

    除了L4WUDU与吴亦凡已经多次共事，成为了明面上的厂牌成员，吴亦凡还曾带领20XXCLUB全队参加2020年的一场音乐节，这也是20XXCLUB首次全员合照，王嗣尧Turbo、陈彦希Regi、<em>Mac</em> Ova Seas、林渝植等人全部出场。然而让

    2021-06-01 09:31:34

  • IPFS、Chia、Bzz和ICP挖礦該怎麼選？哪一個更有優勢？ IPFS、Chia、Bzz和ICP挖礦該怎麼選？哪一個更有優勢？

    目前应用IPFS的机构：1 谷歌<em>浏览器</em>支持IPFS分布式协议 2 万维网 (历史档案博物馆)数据库 3 火狐<em>浏览器</em>支持 IPFS分布式协议 4 EOS 等数字货币数据存储 5 美国国会图书馆，历史资料永久保存在 IPFS 6 加

    2021-06-01 09:31:24

  • 有哪些事是買了雪佛蘭後才知道的？美事偷著樂，開拓者車主隨聊 有哪些事是買了雪佛蘭後才知道的？美事偷著樂，開拓者車主隨聊

    开拓者的车机是兼容苹果和<em>安卓</em>，虽然我不怎么用，但确实兼顾了我家人的很多需求：副驾的门板还配有解锁开关，有的时候老婆开车，下车的时候偶尔会忘记解锁，我在副驾驶可以自己开门：第二排设计很好，不仅配置了一个很大的

    2021-06-01 09:30:48

  • iPhone12在618最新定價，跌價幅度超過1400元，還等iPhone13嗎？ iPhone12在618最新定價，跌價幅度超過1400元，還等iPhone13嗎？

    不仅是<em>安卓</em>手机，苹果手机的降价力度也是前所未有了，iPhone12也“跳水价”了，发布价是6799元，如今已经跌至5308元，降价幅度超过1400元，最新定价确认了。iPhone12是苹果首款5G手机，同时也是全球首款5nm芯片的智能机，它

    2021-06-01 09:30:45

IT145.com E-mail:sddin#qq.com