目錄

• 簡(jiǎn)介
• 安裝使用
• 安裝
• 初始化
• 官方插件
• 功能拓展
• 實(shí)現(xiàn)源碼

簡(jiǎn)介

最近在捯飭自己的個(gè)人網(wǎng)站，想找一款類(lèi)似于掘金的markdown編輯器，主要訴求包含實(shí)時(shí)預(yù)覽、語(yǔ)法高亮、自動(dòng)生成目錄索引。對(duì)比了市面上主流的幾款編輯器，最后采用了@toast-ui/editor。選擇的主要原因就是開(kāi)箱即用，內(nèi)置一些實(shí)用的插件，如表格并且支持合并單元格、語(yǔ)法高亮、圖形展示、uml繪制等；支持自定義插件擴(kuò)展，因?yàn)檫@款編輯器是基于prosemirror，前身即codemirror，編輯器本身是偏底層的，提供了豐富的api供我們自定義開(kāi)發(fā)，這也大大增強(qiáng)了編輯器的靈活性，如果想加一個(gè)目錄索引，我們完全可以自定義開(kāi)發(fā)一個(gè)插件使用。

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

安裝使用

安裝

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",      });    }  }

通過(guò)以上兩步，我們就能得到一個(gè)簡(jiǎn)易的編輯器了，如下圖所示：

顯然我們的目的不僅如此，markdown編輯器還缺少語(yǔ)法高亮、目錄欄，接下來(lái)我們看下如何擴(kuò)展tui

官方插件

官方內(nèi)置了以下插件：

接下來(lái)我們配置代碼語(yǔ)法高亮。

• 安裝插件

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";// 支持所有語(yǔ)言語(yǔ)法高亮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]});

功能拓展

目前編輯器包含了語(yǔ)法高亮，如果需要添加目錄索引，可以監(jiān)聽(tīng)文檔編輯的change事件，獲取markdown文檔內(nèi)容，通過(guò)正則表達(dá)式解析即可。具體實(shí)現(xiàn)如下：

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, // 目錄級(jí)別index,cls: `heading-${levelText[0].length}`,content: vv.slice(levelText[0].length).trim(), // 內(nèi)容      }    })    this.catalogList = catalogList  }}

以上僅僅是一些基礎(chǔ)的使用。markdown基礎(chǔ)語(yǔ)法無(wú)法滿(mǎn)足我們需要時(shí)、需要手動(dòng)修改渲染樣式等需求，tui.editor也提供相應(yīng)的能力。如需要修改標(biāo)題的默認(rèn)渲染樣式，我們可以使用customHTMLRenderer，這一塊官方文檔較少，可以從源碼看出默認(rèn)書(shū)寫(xiě)規(guī)則，內(nèi)置schema位置詳見(jiàn)源碼libs\toastmark\src\html\baseConvertors.ts。

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

最新3.0版本的編輯器是基于Prosemirror，有興趣的小伙伴可以去看下，功能十分強(qiáng)大，也是level1級(jí)富文本編輯器的典型代表。

編輯器最終效果圖如下：

實(shí)現(xiàn)源碼

<template>  <div>    <div ref="editor"></div>    <div v-if="catalogList.length > 0">      <div>目錄</div>      <template v-for="(item, index) in catalogList" :key="index"><div :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: "請(qǐng)輸入內(nèi)容",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 titleconst pattern = /^(#+)\s+(.+)/mglet result = mdText.match(pattern)if (!result) returnconst catalogList = result.map((vv, index) => {  const levelText = vv.match(/^(#+)/)  return {    level: levelText[0].length, // 目錄級(jí)別    index,    cls: `heading-${levelText[0].length}`,    content: vv.slice(levelText[0].length).trim(), // 內(nèi)容  }})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>

參考資料

• toastui/editor
• tui.editor

以上就是一款功能強(qiáng)大的markdown編輯器tui.editor使用示例詳解的詳細(xì)內(nèi)容，更多關(guān)于markdown編輯器tui.editor的資料請(qǐng)關(guān)注其它相關(guān)文章！