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()

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!