基于Vue的markdown编辑器

前言

链接: 基于Vue的markdown编辑器.
该文档只提示怎么暂时Markdown数据，仅用作展示可以设置：peops/;toolbarsFlag:false,subfield:false,defaultOpen

实现过程

1.需要提前安装npm 包
npm install vue-loader vue-template-compiler -D
2.再安装vue-markdown插件
npm install --save vue-markdown
3.在需要用到的地方引入刚安装的插件

import VueMarkdown from 'vue-markdown'
export default {
  components: {
    VueMarkdown // 注入组件
  },
  data () {
    return { 
      value: MarkdownData // value的值是要解析的markdown数据
    }
  }
}
//使用需要注入的组件
<VueMarkdown :source="value"></VueMarkdown>

现在看着不是很理想，需要接着处理
4.通过npm安装需要用到的样式包
npm install github-markdown-css
在main.js中，引入css样式
import 'github-markdown-css/github-markdown.css'
添加类名：markdown-body

<div class="markdown-body">
<VueMarkdown :source="value"></VueMarkdown>
</div>

添加样式之后的效果

5.添加代码高亮的效果
通过npm安装需要的包
npm install highlight.js
在main.js文件中便携vue自定义指令

import 'github-markdown-css/github-markdown.css'
import hljs from 'highlight.js'
// 如果开启了typescript 需要额外安装 npm install @types/highlight.js
// 通过 import * as hljs from 'highlight.js' 引入
Vue.directive('highlight', function (el) {
  const blocks = el.querySelectorAll('pre code')
  blocks.forEach(block => {
    hljs.highlightBlock(block)
  })
})
// 也可以把这自定义指令封装 通过Vue.use()，来注入

使用自定义指令 v-highlight

 <div class="markdown-body">
     <VueMarkdown :source="value" v-highlight></VueMarkdown>
 </div>

添加后，代码高亮的效果

总结

关于Markdown数据保存至服务器和从服务器获取Markdown数据，可以将Markdown进行编码，我使用的是Base64，使用Base64需要注意一些字符会被转换为html格式的编码（比如：’ < >）

参考文章：
VUE-CLI3 直接将 MARKDOWN 转为 HTML
github-markdown-css 使用简解，markdown文案格式优化