分享VUE實用的富文本MarkDown

最近在作一個博客的過程當中，寫文章這個需求能夠說是最重要的，這對比markdown和quill-editor二者，我仍是更喜歡markdown這樣的富文本工具，那VUE項目如何去使用markdown富文本工具，以及如何在頁面上顯示咱們所記錄的markdown文本呢

接下來就以我博客爲例子來分享給你們這款實用的富文本

---

安裝

這裏咱們須要安裝2個包

1 - npm install mavon-editor --save
2 - npm install marked --save

很明顯 mavon-editor 就是一個markdown富文本工具，而marked就是用來解析markdown格式的
複製代碼

引入

// 在main.js中，固然你能夠本身選擇在哪裏引入
// 全局引入markdown 以及 css樣式
import mavonEditor from 'mavon-editor'  
import 'mavon-editor/dist/css/index.css'

Vue.use(mavonEditor) // 使用markdown
複製代碼

使用組件

// 在須要使用的組件中使用咱們的富文本工具，因爲上面我已經全局的使用了mavon-editor，因此直接可使用
// 這裏newArticle表明雙向綁定的數據，也就是我要新增的內容
<mavon-editor v-model="content" :toolbars="toolbars" />

// 在data()中須要定義toolbars
data(){
    return{
        content:'',// 輸入的數據
        toolbars: {
            bold: true, // 粗體
            italic: true, // 斜體
            header: true, // 標題
            underline: true, // 下劃線
            mark: true, // 標記
            superscript: true, // 上角標
            quote: true, // 引用
            ol: true, // 有序列表
            link: true, // 連接
            help: true, // 幫助
            code: true, // code
            subfield: true, // 是否須要分欄
            fullscreen: true, // 全屏編輯
            readmodel: true, // 沉浸式閱讀
            /* 1.3.5 */
            undo: true, // 上一步
            trash: true, // 清空
            /* 1.4.2 */
            navigation: true // 導航目錄
        }
    }
}

// 這樣咱們的頁面上就會出現具備markdown功能的工具器
複製代碼

markdown格式的文本展現

// 在咱們要展現剛剛咱們新增的具備markdown格式的文本內容的頁面上引入marked
import marked from 'marked'

// 這裏我在這個頁面中存放markdown格式的文本內容的變量是content，將content作爲marked的參數傳入
this.showMarkdownContent = markdown(content)

<!-- 而後在HTML中經過使用指令v-html將content -->
<div v-html='showMarkdownContent'></div>

// 這個時候的效果是這樣的
複製代碼

使用css來美化markdown格式文本

能夠看到，上面渲染出來的內容雖然也就解析過了，可是不具有有咱們所認識的markdown的那種樣式
因此爲了美觀，咱們還須要作最後一步，就是經過css來讓咱們的文本更漂亮

而如何實現呢，咱們能夠去網上找一份markdown的css樣式，這裏我就不推薦哪款了（由於本身使用的也很差看）

使用以下：
在剛剛要展現內容的網頁中引入
import './markdown.css' // 該文件裏面就是css的樣式

效果以下
複製代碼

---

其實mavon-editor所具備的工具還有不少，若是你們喜歡的話能夠在網上查閱查閱

本身本人對於這款富文本編輯器仍是十分喜歡的，但願對你們平常的開發有所幫助