react 搭建博客---支持markdown的富文本編輯器

tylin 發(fā)布于2019-08-21 11:52 / 3634人閱讀

摘要：最近在學(xué)，準(zhǔn)備配合搭個博客，找了很多富文本編輯器，都不是很適合用，后來看到一篇搭建博客的文章，里面使用的地址，完全就符合我的想法啊，界面簡潔大方還有預(yù)覽功能。

最近在學(xué)nodejs，準(zhǔn)備配合react+mongodb搭個博客，找了很多富文本編輯器，都不是很適合react用，后來看到一篇vue+node搭建博客的文章，里面使用的simplemde(github地址)，完全就符合我的想法啊，界面簡潔大方還有預(yù)覽功能。
附上官方demo
用法也相當(dāng)簡單，官方介紹的是外鏈的引用方法，下面我說一下如何配合 makded 語法庫和 highlight.js 代碼高亮插件應(yīng)用到react中

首先安裝相關(guān)依賴

npm install simplemde marked highlight.js  --save

ps：simplemde官方的css也要引入到項(xiàng)目中，不然樣式會缺失

在組件中引入

import SimpleMDE from "simplemde"
import marked from "marked"
import highlight from "highlight.js"

基本使用

在constructor中new一個SimpleMDE編輯器
render中要有對應(yīng)的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;
                        }
                });
        },
})

獲取編輯器內(nèi)容

this.smde.value()

GPU云服務(wù)器云服務(wù)器支持markdown的博客 markdown博客 markdown在線編輯器 react編譯后webrtc不支持

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/87208.html

相關(guān)文章

Django搭建個人博客：使用django-ckeditor富文本編輯器

摘要：后面兩個編輯器自帶，不用單獨(dú)下載，添上就可以了添加相關(guān)插件這樣就完成了代碼高亮效果不錯在前臺使用為了讓用戶在前臺也能使用富文本編輯器，還得對代碼稍加改動。對于有些不喜歡的人來說，甚至可以連博文都使用提供的富文本編輯器。前面我們已經(jīng)實(shí)現(xiàn)了用Markdown語法寫文章了。但是文章的評論用Markdown就不太合適了，你不能強(qiáng)求用戶也花時(shí)間去熟悉語法啊。另外評論中通常還有表情、帶顏色的字體...

beanlam 2019-07-31 10:11 評論0 收藏0
手摸手，帶你用vue擼后臺系列三(實(shí)戰(zhàn)篇)

摘要：社區(qū)的認(rèn)可目前已經(jīng)是相關(guān)最多的開源項(xiàng)目了，體現(xiàn)出了社區(qū)對其的認(rèn)可。監(jiān)聽事件手動維護(hù)列表這樣我們就簡單的完成了拖拽排序。完整項(xiàng)目地址：vue-element-admin 系類文章一：手摸手，帶你用vue擼后臺系列一(基礎(chǔ)篇)系類文章二：手摸手，帶你用vue擼后臺系列二(登錄權(quán)限篇)系類文章三：手摸手，帶你用vue擼后臺系列三(實(shí)戰(zhàn)篇）系類文章四：手摸手，帶你用vue擼后臺系列...

Channe 2019-08-20 17:15 評論0 收藏0
手摸手，帶你用vue擼后臺系列三(實(shí)戰(zhàn)篇)

摘要：社區(qū)的認(rèn)可目前已經(jīng)是相關(guān)最多的開源項(xiàng)目了，體現(xiàn)出了社區(qū)對其的認(rèn)可。監(jiān)聽事件手動維護(hù)列表這樣我們就簡單的完成了拖拽排序。完整項(xiàng)目地址：vue-element-admin 系類文章一：手摸手，帶你用vue擼后臺系列一(基礎(chǔ)篇)系類文章二：手摸手，帶你用vue擼后臺系列二(登錄權(quán)限篇)系類文章三：手摸手，帶你用vue擼后臺系列三(實(shí)戰(zhàn)篇）系類文章四：手摸手，帶你用vue擼后臺系列...

zgbgx 2019-08-29 12:46 評論0 收藏0
selenuim操作基于REACT實(shí)現(xiàn)的富文本編輯器1

摘要：中大多數(shù)的輸入框都是標(biāo)簽，但是由于業(yè)務(wù)中前端有使用到基于實(shí)現(xiàn)的富文本編輯器，在實(shí)現(xiàn)自動化測試編寫時(shí)自然會涉及到對富文本器進(jìn)行操作處理檢查該編輯器的元素，可以看到和正常的不同，該結(jié)構(gòu)為一個里面裹了個而在其中輸入文字，則是在改變中的如果有換行的 web中大多數(shù)的輸入框都是標(biāo)簽，但是由于業(yè)務(wù)中前端有使用到基于REACT實(shí)現(xiàn)的富文本編輯器，在實(shí)現(xiàn)自動化測試編寫時(shí)自然會涉及到對富文本器進(jìn)行操作處...

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

摘要：轉(zhuǎn)載來源包管理器管理著庫，并提供讀取和打包它們的工具。能構(gòu)建更好應(yīng)用的客戶端包管理器。一個整合和的最佳思想，使開發(fā)者能快速方便地組織和編寫前端代碼的下一代包管理器。很棒的組件集合。隱秘地使用和用戶數(shù)據(jù)。轉(zhuǎn)載來源：https://github.com/jobbole/aw... 包管理器管理著 javascript 庫，并提供讀取和打包它們的工具。?npm – npm 是 javasc...

netmou 2019-08-23 12:28 評論0 收藏0