第一款功能強(qiáng)大的markdown編輯器tui.editor使用示例詳解importprismjs/themes/prism.css

import@toast-ui/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight.css

importEditorfrom@toast-ui/editor

//支持所有語言語法高亮

importcodeSyntaxHighlightfrom@toast-ui/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight-all.js

consteditor=newEditor({

//...

plugins:[codeSyntaxHighlight]

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

consteditor=newEditor({

//...

events:{

change:this.handleContentChange.bind(this)

methods:{

handleContentChange(){

constmdText=this.editor.mdEditor.getMarkdown()

this.parseMdTitle(mdText)

parseMdTitle(mdText){//解析markdowntitle

constpattern=/^(#+)\s+(.+)/mg

letresult=mdText.match(pattern)

if(!result)return

constcatalogList=result.map((vv,index)={

constlevelText=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ǔ)語法無法滿足我們需要時(shí)、需要手動(dòng)修改渲染樣式等需求，tui.editor也提供相應(yīng)的能力。如需要修改標(biāo)題的默認(rèn)渲染樣式，我們可以使用customHTMLRenderer，這一塊官方文檔較少，可以從源碼看出默認(rèn)書寫規(guī)則，內(nèi)置schema位置詳見源碼libs\toastmark\src\html\baseConvertors.ts。

newEditor({

//...

customHTMLRenderer:{

heading(node,{entering}){

constspec={

type:enteringopenTag:closeTag,

tagName:`h${node.level}`,

outerNewLine:true,

//給每個(gè)header添加class

if(entering)spec.attributes={

class:`heading${node.level}`

returnspec

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

編輯器最終效果圖如下：

template

div>

參考資料

toastui/editor

tu