mavon-editor的使用

mavon-editor的基本使用

mavon-editor是一款基于Vue的Markdown编辑器，可以在前端展示Markdown的编辑界面并完成相关的编辑操作。接下来介绍该组件的基本使用方式，包括组件引入以及组件使用。当然在使用之前，需要进行安装，安装指令如下：

1	`npm install mavon-editor --save`

1. 组件引入

1.1 在vue-cli工程中引入

在main.js文件中进行全局注册：

//全局注册
import Vue from 'vue'
import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'

//使用组件
Vue.use(mavonEditor);

1.2 在nuxt-cli工程中引入

首先在plugins文件夹中创建js文件vueMarkdown.js，里面填入以下内容：

import Vue from 'vue'
import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'

Vue.use(mavonEditor);

之后在nuxt的配置文件nuxt.config.js中引入插件：

1
2
3

plugins:[
    '@/plugins/vueMarkdown',
]

2. 组件使用

引入完成之后，就可以以组件的形式使用，使用标签<mavon-editor></mavon-editor>即可。

<template>
  <div>
    <mavon-editor
      ref="md"
      placeholder="请输入文档内容..."
      :boxShadow="true"
      style="z-index:1;border: 1px solid #d9d9d9;min-height:550px"
      v-model="content"
      :toolbars="toolbars"
      @save="saveMd"
      @imgAdd="handleImgAdd"
      @imgDel="handleImgDel"
    ></mavon-editor>
  </div>
</template>

<script>
export default {
  name: "target",
  data() {
    return {
      content:'',
      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 // 预览
      }
    }
  }
}
</script>

引入之后，我们就能够在页面中看到如下效果：

其中，常用参数的含义如下：

placehodler：文档内容为空的时候在输入框中显示的内容
boxShadow：是否展示阴影效果
v-model=“content”：表示文档内容，文档内容与data中的数据content是动态双向绑定的
toolbars：表示工具栏中需要显示的内容

经常用到的几个监听的事件：save事件，imgAdd事件和imgDel事件。save事件在点击保存按钮或者按下ctrl+s之后触发，imgAdd事件在点击图片上传之后触发，imgDel事件在点击图片按钮中的删除按钮后触发（手动删除文档内容中的引入图片代码不会触发）

通过引入mavon-editor可以完成前端修改网页内容后动态保存，具体思路如下：

首先网页的展示设置成动态的，一个网页的内容对应后端的一个md文件。网页展示之前向后端请求内容，后端读取对应的md文件内容，将其转化成html格式的字符串，然后将html字符串和md字符串传送给前端，其中html字符串通过v-html指令绑定，将内容展现出来，md字符串绑定到content中，可以展示在编辑器中。

在前端修改网页，只需要修改编辑器中的文档内容，通过动态绑定机制可以获取到当前的文档内容。之后监听保存事件，将当前文档内容传送给后端，后端保存到对应路径即可。

图片上传和删除

图片的上传和删除分别监听imgAdd和imgDel事件。

1. 图片上传

默认的图片上传事件会将本地图片放入文档内容中，但是在前后端分离的情况下，图片不会上传到服务器中。

于是需要监听imgAdd事件，将本地添加的图片上传到后端服务器当中。发起axios请求向后端上传图片，后端将图片保存在指定的目录下，然后返回图片访问的url，然后前端的mavon-editor通过调用img2url来完成代码的替换。代码如下：

//图片上传功能
    handleImgAdd(pos, $file) {
      //将图片上传到服务器上
      let formData = new FormData();
      formData.append('file', $file);
      formData.append('path', 'img/' + this.$route.params.target);
      //向后端传送表单数据，同时指定保存路径(img/xxx)
      //上传的文件名即为文件在本地的名称
      this.$axios({
        method: 'POST',
        url: this.$store.state.backend_url + 'post/addImg',
        data: formData
      })
        .then(response => {
          let img_url = this.$store.state.backend_url + response.data.url;
          this.$refs.md.$img2Url(pos, img_url);
          this.$notify.success({
            title: '',
            message: '图片上传成功，此后不应手动修改已上传图片的名称',
            duration: 2000,
          })
        })
        .catch(error => {
          console.log(error);
          this.$notify.error({
            title: '',
            message: '图片上传失败',
            duration: 2000,
          })
        })
    },

其中上传的链接需要根据实际内容进行修改。

这里有一个问题，就是嵌入在md中的访问图片的方式是通过img标签，src属性来完成的，这种方式没有办法带上header，也就没有办法完成权限的验证。一种解决方法是这里可以让后端将图片保存到静态资源当中，即可以通过url直接访问得到（如flask的static），这样就可以通过img中的src得到图片。

2. 图片删除

图片删除监听imgDel事件，其中参数pos中可以获得图片的链接，通过pos[0]即可。获取到图片的链接后（具体来说获取到图片的名称即可），就可以向后端发送请求，后端再根据图片的路径进行删除。具体代码如下：

//图片删除功能
    handleImgDel(pos) {
      console.log(pos[0]);
      //请求后端删除对应的文件
      //通过名称来找到对应的文件，如果名称被修改，会造成无法删除的错误
      this.$axios.post(this.$store.state.backend_url + 'post/deleteImg', {
        img_url: pos[0]
      })
        .then(response => {
          this.$notify.success({
            title: '',
            message: '删除成功',
            duration: 2000,
          })
        })
        .catch(error => {
          console.log(error);
          this.$notify.error({
            title: '',
            message: '后台删除失败，请查看是否更改了图片名称',
            duration: 2000,
          })
        })
    }