我是怎样引入开源系统中的Markdown功能的？

了解这个开源系统的观众一定知道了我这个系统的功能，就是打造成一个师徒系统，主要的展示自己的机会就是通过发博客来分享技术，其中最重要的一步类似csdn中的写博客的功能，那么我们怎么来实现这个功能呢？

首先我想到的就是将Markdown引入到改系统中，还有该项目的前端是vue的技术，于是我在网上找相关的博客，最终参考的是github上一位大佬写的一个开源项目，地址：mavonEditor

最终要实现的效果如下图所示

第一步，安装

npm install mavon-editor --save

第二步，引入

第三步，使用

别看只有简单的三个步骤啊，第二步和第三步博主摸索了好久好久的！！！

第四步，在vue中展示出来

   <mavon-editor v-model="blogText"  ref=md @imgAdd="$imgAdd" @change="valueChange"/>

这里绑定的change函数会在编辑输入时触发传回的params: { value: 你输入的文本, render: markdown编译之后返回的HTML文本 }

第五步，指定页面展示编写的MD内容

我们只需在页面组件中添加容器标签并使用v-html插入即可:

这里的htmlText就是markdown编译之后返回的html文本内容，上方函数触发时记得保存render的值，class就是之前说的样式辣，但是注意自己是否有样式影响这里的布局，如果文本自己居中了，可以尝试在此处添加css：text-align: left。

可能在使用v-html时会出现XSS警告，可以使用插件vue-dompurify-html：

安装：npm i vue-dompurify-html -S
在main.js中引入使用

import VueDOMPurifyHTML from 'vue-dompurify-html'
 
Vue.use(VueDOMPurifyHTML)

将 v-html 替换为 v-dompurify-html 。 搞定！！
部分片段引用：www.cnblogs.com/wacheer/p/1…

PS：直到发布该博客的前一天，有小伙伴订阅了该专栏！！！所以很感动！！！感谢@qq_42991424小伙伴的订阅！！

以下的内容是粘贴项目文档中的，因为该项目是在github，很多小伙伴反应打不开，所以以下内容并非原创请注意：

API 文档

props

toolbars

默认工具栏按钮全部开启, 传入自定义对象，可以选择启用部分按钮

/*
  例如: {
      bold: true, // 粗体
      italic: true,// 斜体
      header: true,// 标题
  }
  此时, 仅仅显示此三个功能键
*/
toolbars: {
    bold: true, // 粗体
    italic: true, // 斜体
    header: true, // 标题
    underline: true, // 下划线
    strikethrough: true, // 中划线
    mark: true, // 标记
    superscript: true, // 上角标
    subscript: true, // 下角标
    quote: true, // 引用
    ol: true, // 有序列表
    ul: true, // 无序列表
    link: true, // 链接
    imagelink: true, // 图片链接
    code: true, // code
    table: true, // 表格
    fullscreen: true, // 全屏编辑
    readmodel: true, // 沉浸式阅读
    htmlcode: true, // 展示html源码
    help: true, // 帮助
    /* 1.3.5 */
    undo: true, // 上一步
    redo: true, // 下一步
    trash: true, // 清空
    save: true, // 保存（触发events中的save事件）
    /* 1.4.2 */
    navigation: true, // 导航目录
    /* 2.1.8 */
    alignleft: true, // 左对齐
    aligncenter: true, // 居中
    alignright: true, // 右对齐
    /* 2.2.1 */
    subfield: true, // 单双栏模式
    preview: true, // 预览
}

如果需要自定义添加工具栏按钮，可以通过以下方式

<mavon-editor>
  <!-- 左工具栏前加入自定义按钮 -->
  <template slot="left-toolbar-before">
    <button
      type="button"
      @click="$click('test')"
      class="op-icon fa fa-mavon-align-left"
      aria-hidden="true"
      title="自定义"
    ></button>
  </template>
  <!-- 左工具栏后加入自定义按钮  -->
  <template slot="left-toolbar-after">
    <button
      type="button"
      @click="$click('test')"
      class="op-icon fa fa-mavon-align-left"
      aria-hidden="true"
      title="自定义"
    ></button>
  </template>
  <!-- 右工具栏前加入自定义按钮  -->
  <template slot="right-toolbar-before">
    <button
      type="button"
      @click="$click('test')"
      class="op-icon fa fa-mavon-align-left"
      aria-hidden="true"
      title="自定义"
    ></button>
  </template>
  <!-- 右工具栏后加入自定义按钮  -->
  <template slot="right-toolbar-after">
    <button
      type="button"
      @click="$click('test')"
      class="op-icon fa fa-mavon-align-left"
      aria-hidden="true"
      title="自定义"
    ></button>
  </template>
</mavon-editor>

events 事件绑定

代码高亮

如不需要hightlight代码高亮显示，你应该设置ishljs为false

开启代码高亮props

<!-- ishljs默认为true -->
<mavon-editor :ishljs="true"></mavon-editor>

为优化插件体积，从v2.4.2起以下文件将默认使用cdnjs外链:

• highlight.js
• github-markdown-css
• katex(v2.4.7)

代码高亮highlight.js中的语言解析文件和代码高亮样式将在使用时按需加载.
github-markdown-css和katex仅会在mounted时加载

图片上传

<template>
    <mavon-editor ref=md @imgAdd="$imgAdd" @imgDel="$imgDel"></mavon-editor>
</template>
<script>
export default {
    methods: {
        // 绑定@imgAdd event
        $imgAdd(pos, $file){
            // 第一步.将图片上传到服务器.
           var formdata = new FormData();
           formdata.append('image', $file);
           axios({
               url: 'server url',
               method: 'post',
               data: formdata,
               headers: { 'Content-Type': 'multipart/form-data' },
           }).then((url) => {
               // 第二步.将返回的url替换到文本原位置![...](0) -> ![...](url)
               /**
               * $vm 指为mavonEditor实例，可以通过如下两种方式获取
               * 1. 通过引入对象获取: `import {mavonEditor} from ...` 等方式引入后，`$vm`为`mavonEditor`
               * 2. 通过$refs获取: html声明ref : `<mavon-editor ref=md ></mavon-editor>，`$vm`为 `this.$refs.md`
               */
               $vm.$img2Url(pos, url);
           })
        }
    }
}
</script>

图片上传详情点击这里…

注

• 默认大小样式为 min-height: 300px , min-width: 300px 可自行覆盖
• 基础z-index: 1500
• 仅用作展示可以设置props: toolbarsFlag: false , subfield: false, defaultOpen: “preview”

快捷键