react 搭建博客---支持markdown的富文本编辑器

tylin 发布于2019-08-21 11:52 / 3475人阅读

摘要：最近在学，准备配合搭个博客，找了很多富文本编辑器，都不是很适合用，后来看到一篇搭建博客的文章，里面使用的地址，完全就符合我的想法啊，界面简洁大方还有预览功能。

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

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

服务器托管云服务器支持markdown的博客 markdown博客 markdown在线编辑器 react编译后webrtc不支持

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/87208.html

Django搭建个人博客：使用django-ckeditor富文本编辑器

摘要：后面两个编辑器自带，不用单独下载，添上就可以了添加相关插件这样就完成了代码高亮效果不错在前台使用为了让用户在前台也能使用富文本编辑器，还得对代码稍加改动。对于有些不喜欢的人来说，甚至可以连博文都使用提供的富文本编辑器。前面我们已经实现了用Markdown语法写文章了。但是文章的评论用Markdown就不太合适了，你不能强求用户也花时间去熟悉语法啊。另外评论中通常还有表情、带颜色的字体...

beanlam 2019-07-31 10:11 评论0 收藏0
手摸手，带你用vue撸后台系列三(实战篇)

摘要：社区的认可目前已经是相关最多的开源项目了，体现出了社区对其的认可。监听事件手动维护列表这样我们就简单的完成了拖拽排序。完整项目地址：vue-element-admin 系类文章一：手摸手，带你用vue撸后台系列一(基础篇)系类文章二：手摸手，带你用vue撸后台系列二(登录权限篇)系类文章三：手摸手，带你用vue撸后台系列三(实战篇）系类文章四：手摸手，带你用vue撸后台系列...

Channe 2019-08-20 17:15 评论0 收藏0
手摸手，带你用vue撸后台系列三(实战篇)

摘要：社区的认可目前已经是相关最多的开源项目了，体现出了社区对其的认可。监听事件手动维护列表这样我们就简单的完成了拖拽排序。完整项目地址：vue-element-admin 系类文章一：手摸手，带你用vue撸后台系列一(基础篇)系类文章二：手摸手，带你用vue撸后台系列二(登录权限篇)系类文章三：手摸手，带你用vue撸后台系列三(实战篇）系类文章四：手摸手，带你用vue撸后台系列...

zgbgx 2019-08-29 12:46 评论0 收藏0
selenuim操作基于REACT实现的富文本编辑器1

摘要：中大多数的输入框都是标签，但是由于业务中前端有使用到基于实现的富文本编辑器，在实现自动化测试编写时自然会涉及到对富文本器进行操作处理检查该编辑器的元素，可以看到和正常的不同，该结构为一个里面裹了个而在其中输入文字，则是在改变中的如果有换行的 web中大多数的输入框都是标签，但是由于业务中前端有使用到基于REACT实现的富文本编辑器，在实现自动化测试编写时自然会涉及到对富文本器进行操作处...

since1986 2019-07-30 17:03 评论0 收藏0
javascript功能插件大集合前端常用插件 js常用插件

摘要：转载来源包管理器管理着库，并提供读取和打包它们的工具。能构建更好应用的客户端包管理器。一个整合和的最佳思想，使开发者能快速方便地组织和编写前端代码的下一代包管理器。很棒的组件集合。隐秘地使用和用户数据。转载来源：https://github.com/jobbole/aw... 包管理器管理着 javascript 库，并提供读取和打包它们的工具。•npm – npm 是 javasc...

netmou 2019-08-23 12:28 评论0 收藏0