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