脚本宝典收集整理的这篇文章主要介绍了react 搭建博客---支持markdown的富文本编辑器,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
最近在学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()
以上是脚本宝典为你收集整理的react 搭建博客---支持markdown的富文本编辑器全部内容,希望文章能够帮你解决react 搭建博客---支持markdown的富文本编辑器所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。