vue使用markdown

前言：

項目開發需要用到富文本編輯器，最終確定使用vue框架 vue-meditor 。

1、vue-meditor簡介

一款使用marked和highlight.js開發的一款markdown編輯器，除常見markdown語法外，支持快捷輸入、圖片粘貼、代碼複製、全屏編輯、預覽等功能
 

1.1、優點：

• 使用簡單，安裝npm包或者引入js包就行
• 方便擴展，定製型比較強
• 功能強大，總分3個版本，簡單版、預覽版、專業版
• 體積小，加載速度快，npm包刪除了highlight.js和codemirror裏的依賴

1.2、實現思路：

• 通過監聽文本輸入區域內內容的變化，實時將輸入的markdown語法進行編譯，並渲染到預覽區域。
• 編輯器大致分爲頭部菜單欄、左側內容輸入區域、右側預覽區域三個部分。
• 頭部菜單主要爲定自定義標題區域和菜單按鈕，菜單按鈕可通過配置文件進行顯示和隱藏；左側編輯區域，簡單版使用textarea開發，滿足基本需求，
• 專業版使用codemirror開發，編輯區域支持手動輸入文本和通過頭部菜單插入；右側預覽區域可實時預覽輸入文本，並可通過菜單按鈕，進行編輯區域和預覽區域的切換

1.3詳細文檔：

github項目地址：https://github.com/zhaoxuhui1122/vue-markdown

github文檔地址：https://zhaoxuhui1122.github.io/vue-markdown-docs/

2、安裝使用

2.1、使用npm方式引入

1、npm安裝

vue項目中，確保npm,node版本沒有問題，直接用npm安裝,

npm install vue-meditor --save

2、項目中使用

注意，count初始化賦值的時候，如果是後臺傳輸數據，一定坐下異常處理。否則如果count爲null，組件會報錯。

//簡單版
import Markdown from 'vue-meditor'
export default {
  name: 'markdownTest',
  data: {
    count: '測試預覽'
  },
  components: {
    Markdown
  }
}
//html
<MarkdownPro
v-model="count"
:height="400"
@on-paste-image="onPasteImage"
@on-ready="onReady"
@on-copy="onCopy"
@on-save="onSave"
theme="light"
/>


//專業版
import { MarkdownPro } from 'vue-meditor
export default {
  name: 'markdownTest',
  data: {
    count: '測試預覽'
  },
  components: {
    MarkdownPro
  },
  methods: {
    onReady (data) {
      console.log(data)
    },
    onCopy (text) {
      console.log(text)
    },
    onPasteImage (file) {
      console.log(file)
    },
    onSave (data) {
      console.log(data)
    },
  }
}
//html
<MarkdownPro
v-model="count"
:height="400"
@on-paste-image="onPasteImage"
@on-ready="onReady"
@on-copy="onCopy"
@on-save="onSave"
theme="light"
/>
   
    
//預覽版
import { MarkdownPreview } from 'vue-meditor'
export default {
  name: 'markdownTest',
  data: {
    count: '測試預覽'
  },
  components: {
    MarkdownPreview
  }
}
//html
<MarkdownPro
v-model="count"
:height="400"
theme="light"
/>                   

2.2、js安裝包引用

1、下載github代碼

git clone https://github.com/zhaoxuhui1122/vue-markdown.git

2、複製文件

複製src文件夾下內容至components文件夾下

//簡單版
import Markdown from '@/components/markdown/...';
//專業版 
import MarkdownPro from '@/components/markdown/pro';
//預覽組件
import MarkdownPreview from '@/components/markdown/preview';

 

 

最後看下效果圖，左邊是富文本編輯器，右邊是設置了屬性，預覽功能，邊寫邊預覽