最近在學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()