react 搭建部落格—支援markdown的富文字編輯器

wuyongqiu發表於2017-08-11

最近在學nodejs,準備配合react+mongodb搭個部落格,找了很多富文字編輯器,都不是很適合react用,後來看到一篇vue+node搭建部落格的文章,裡面使用的simplemde(github地址),完全就符合我的想法啊,介面簡潔大方還有預覽功能。
附上官方demo
用法也相當簡單,官方介紹的是外鏈的引用方法,下面我說一下如何配合 makded 語法庫和 highlight.js 程式碼高亮外掛應用到react中

首先安裝相關依賴

npm install simplemde marked highlight.js  --save

ps:simplemde官方的css也要引入到專案中,不然樣式會缺失

在元件中引入

import SimpleMDE from `simplemde`
import marked from `marked`
import highlight from `highlight.js`

基本使用

在constructor中new一個SimpleMDE編輯器
render中要有對應的DOM  <textarea id="editor"></textarea>

this.smde = new SimpleMDE({
        element: document.getElementById(`editor`).childElementCount,  
        autofocus: true,
        autosave: true,
        previewRender: function(plainText) {
                return marked(plainText,{
                        renderer: new marked.Renderer(),
                        gfm: true,
                        pedantic: false,
                        sanitize: false,
                        tables: true,
                        breaks: true,
                        smartLists: true,
                        smartypants: true,
                        highlight: function (code) {
                                return highlight.highlightAuto(code).value;
                        }
                });
        },
})

獲取編輯器內容

this.smde.value()

相關文章