Vue中使用Markdown编辑器

前言

仓库地址：https://github.com/hinesboy/mavonEditor

安装

npm install mavon-editor --save

引用

main.js:

// 全局注册
// import with ES6
import Vue from 'vue'
import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
// use
Vue.use(mavonEditor)
new Vue({
    'el': '#main',
    data() {
        return { value: '' }
    }
})

使用

index.html

<div id="main">
     <mavon-editor
      v-model="markdown"
      :boxShadow="false"
      :subfield="true"
      placeholder="开始写文章吧"
      :toolbars="toolbars"
      @change="mdChange"
      style="
        z-index: 999;
        border: 1px solid #d9d9d9;
        height: 600px;
        margin-bottom: 20px;
      "
    />
</div>

配置

<script>
export default {
  data() {
    return {
      markdown: "# 正文",
      mdHtml: "",
      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: false, // 保存（触发events中的save事件）
        /* 1.4.2 */
        navigation: true, // 导航目录
        /* 2.1.8 */
        alignleft: true, // 左对齐
        aligncenter: true, // 居中
        alignright: true, // 右对齐
        /* 2.2.1 */
        subfield: true, // 单双栏模式
        preview: true, // 预览
      },
    };
  },
  methods: {
    mdChange(str, html) {
      this.mdHtml = html;
    },
  },
};
</script>

只展示

<mavon-editor
    v-model="article.md"
    :boxShadow="false"
    :toolbarsFlag="false"
    :subfield="false"
    defaultOpen="preview"
    style="z-index: 3; margin-bottom: 20px"
/>

事件

name 方法名	params 参数	describe 描述
change	String: value , String: render	编辑区发生变化的回调事件(render: value 经过markdown解析后的结果)
save	String: value , String: render	ctrl + s 的回调事件(保存按键,同样触发该回调)
fullScreen	Boolean: status , String: value	切换全屏编辑的回调事件(boolean: 全屏开启状态)
readModel	Boolean: status , String: value	切换沉浸式阅读的回调事件(boolean: 阅读开启状态)
htmlCode	Boolean: status , String: value	查看html源码的回调事件(boolean: 源码开启状态)
subfieldToggle	Boolean: status , String: value	切换单双栏编辑的回调事件(boolean: 双栏开启状态)
previewToggle	Boolean: status , String: value	切换预览编辑的回调事件(boolean: 预览开启状态)
helpToggle	Boolean: status , String: value	查看帮助的回调事件(boolean: 帮助开启状态)
navigationToggle	Boolean: status , String: value	切换导航目录的回调事件(boolean: 导航开启状态)
imgAdd	Number: pos, File: imgfile	图片文件添加回调事件(pos: 图片在列表中的位置, File: File Object)
imgDel	Array(2):[Number: pos,File:imgfile ]	图片文件删除回调事件(Array(2): 两个元素的数组，第一位是图片的URL，第二位是File对象)

图片上传

默认图片上传的会转成base64字符串，这样会影响加载的性能，建议图片进行上传到服务器上。

<template>
    <mavon-editor ref="md" @imgAdd="$imgAdd" @imgDel="$imgDel"></mavon-editor>
</template>
<script>
export default {
    data() {
        return {
          markdown: "# 正文",
          mdHtml: "",
        };
    },
    methods: {
        $imgAdd(pos, $file) {
          let uploadBase = "http://localhost:8080/";
          let formdata = new FormData();
          formdata.append("file", $file);
          axios({
            url: uploadBase + "file/upload",
            method: "post",
            data: formdata,
            headers: { "Content-Type": "multipart/form-data" },
          }).then((res) => {
            if (res.status === 200) {
              let url = uploadBase + res.data.obj;
              this.$refs.md.$img2Url(pos, url);
            }
          });
        },
        $imgDel(pathArr) {
          console.info(pathArr[0]);
        },
    }
}
</script>

注意

$imgDel方法中pathArr是一个长度为2的数组，第一位保存的是图片的URL，第二个保存的是File对象。

可以在这个事件中删除已上传服务器上的文件。