[VUE插件系列] - vue-bl-markdown-editor編輯器組件組件

我在oschina看到了vue-bl-markdown-editor的首頁推薦

內心在想，既然進入了oschina的首頁推薦，可能在往後的工做中會用的到的插件，在這裏記錄一下。

其中還有涉及到一些工具欄的用法，能夠詳細查看gitee平臺的教程，gitee地址見底部查看。

安裝插件

npm install vue-bl-markdown-editor複製代碼

引入vue-bl-markdown-editor庫

main.json

import MarkDownEditor from 'vue-bl-markdown-editor'
import 'vue-bl-markdown-editor/dist/css/main.css'複製代碼

index.html

<!--本組件使用font-awesome字體圖標庫，請於index.html提早引入--> <link href="//cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <!--代碼塊樣式，更多查看 https://highlightjs.org --> <link href="//cdn.bootcss.com/highlight.js/9.14.1/styles/atom-one-dark.min.css" rel="stylesheet"> <!--編輯器主題顏色--> <link href="//cdn.bootcss.com/github-markdown-css/3.0.1/github-markdown.min.css" rel="stylesheet">複製代碼

組件中

<template>  <div class="el-markdown">    <h1>vue-bl-markdown-editor</h1>    <mark-down-editor v-model="elvalue"></mark-down-editor>  </div></template><script>export default {  name: 'el-markdown',  data () {    return {      elvalue: '這是第一個markdown例子'    }  }}</script>複製代碼

vue-bl-markdown-editor是一個基於markdown-it 高度可擴展的vue編輯器組件，支持擴展markdown-it插件，工具欄，樣式，內置經常使用工具欄（圖片粘貼上傳，拖拽上傳，錄音上傳播放等）

gitee： gitee.com/bl_it/vue-b…