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

tylin 發布于2019-08-21 11:52 / 3618人閱讀

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

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

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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