简介

mavon-editor是一个基于Vue的markdown的编辑器。

安装

npm install mavon-editor --save

使用mavon-editor

在Vue中引入项目

main.js（全局引入）

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

index.html（放置编辑器的页面）

<mavon-editor v-model="value"/>

在nuxt.js中使用

在工程目录下plugins下新建vue-mavon-editor.js

import Vue from 'vue';
import mavonEditor from 'mavon-editor';
import 'mavon-editor/dist/css/index.css';
//use
Vue.use(mavonEditor);

然后在nuxt.config.js中添加plugins配置

 plugins: [
  //...
    { src: '@/plugins/vue-mavon-editor', srr: false }
  ],

在页面中或组件中引入

<template>
  <div class="mavonEditor">
    <no-ssr>
      <mavon-editor :toolbars="markdownOption" v-model="handbook"/>
    </no-ssr>
  </div>
</template>
<script>
export default {
  data() {
    return {
      markdownOption: {
        bold: true, // 粗体
        ... // 更多配置
      },
      handbook: "#### how to use mavonEditor in nuxt.js"
    };
  }
};
</script>
<style scoped>
.mavonEditor {
  width: 100%;
  height: 100%;
}
</style>

配置工具栏

默认配置：

/*
    默认工具栏按钮全部开启, 传入自定义对象
    例如: {
         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, // 预览
  }

API文档

Event事件绑定

代码高亮

开启代码高亮，如果要关闭将ishljs设置为false即可

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

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

Notice: 可选配色方案 和 支持的语言 是从 highlight.js/9.12.0 导出的

# 图片上传

<template>
    <mavon-editor ref=md @imgAdd="$imgAdd" @imgDel="$imgDel"></mavon-editor>
</template>
exports 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);
           })
        }
    }
}

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

方式1：图片上传至文件服务器

• 每次添加图片触发上传

<template>
    <mavon-editor ref=md @imgAdd="$imgAdd" @imgDel="$imgDel"></mavon-editor>
</template>
exports 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.$img2Url 详情见本页末尾
               $vm.$img2Url(pos, url);
           })
        }
    }
}

• 统一上传多张图片

<template>
    <!--点击按钮触发图片统一上传-->
    <button @click="uploadimg">upload</button>
    <mavon-editor ref=md @imgAdd="$imgAdd" @imgDel="$imgDel"></mavon-editor>
</template>
exports default {
    data(){
        return {
            img_file: {}
        }
    },
    methods: {
        // 绑定@imgAdd event
        $imgAdd(pos, $file){
            // 缓存图片信息
            this.img_file[pos] = $file;
        },
        $imgDel(pos){
            delete this.img_file[pos];
        },
        uploadimg($e){
            // 第一步.将图片上传到服务器.
            var formdata = new FormData();
            for(var _img in this.img_file){
                formdata.append(_img, this.img_file[_img]);
            }
            axios({
                url: 'server url',
                method: 'post',
                data: formdata,
                headers: { 'Content-Type': 'multipart/form-data' },
            }).then((res) => {
                /**
                 * 例如：返回数据为 res = [[pos, url], [pos, url]...]
                 * pos 为原图片标志（0）
                 * url 为上传后图片的url地址
                 */
                 // 第二步.将返回的url替换到文本原位置![...](0) -> ![...](url)
                for (var img in res) {
                    // $vm.$img2Url 详情见本页末尾
                    $vm.$img2Url(img[0], img[1]);
                }
            })
        },
    }
}

方式2：将图片保存为base64编码

<template>
    <mavon-editor ref=md @imgAdd="$imgAdd" v-model="mdStr" @imgDel="$imgDel"></mavon-editor>
</template>
exports default {
    data() {
        return {
            mdStr: '### demo \n ![image](0)'
        };
    },
    mounted() {
        // 如果原始md字符串中存在曾上传的图片， 则需要将对应<img>中的src替换为base64
        this.$nextTick(() => {
            // $vm.$imgUpdateByUrl 详情见本页末尾
            $vm.$imgUpdateByUrl(0, base64内容);
        }
    },
    methods: {
        $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((flag) => {
           })
        }
    }
}

图片事件

name	params	describe
refs.toolbar_left.$imgDelByFilename(>=2.1.6)	String: filename	主动删除对应图片文件, 如果成功返回TRUE，否则返回FALSE, (并将其从 md 源码中删除 (>=2.4.16))
refs.toolbar_left.$imgAddByFilename(>=2.1.6)	String: filename, File: file	添加对应图片文件，文件别名为filename(filename 必须为 ./filename 样式), 如果成功返回TRUE，否则返回FALSE
refs.toolbar_left.$imgUpdateByFilename(>=2.1.6)	String: filename, File: file	更新对应文件名的图片文件(filename 必须为 ./filename 样式), 如果成功返回TRUE，否则返回FALSE
imgUpdateByUrl(>=2.1.5)	String: filename, String: url	将md源码中图片文件名替换为url(如[图片上传失败...(image-f2acd-1563459410369)] -> [图片上传失败...(image-608741-1563459410369)])

注意: $vm指为mavonEditor实例，可以通过如下两种方式获取

1. 通过引入对象获取: import {mavonEditor} from ... 等方式引入后，此时$vm即为mavonEditor
2. 通过vm为this.$refs.md`

Markdown-It

获取mavonEditor中的markdown-it对象

方法1：全局引入mavonEditor获取

import mavonEditor from 'mavon-editor'
Vue.use(mavonEditor)
//...
mavonEditor.markdownIt

方法2：局部引入mavonEditor获取

import {mavonEditor} from 'mavon-editor'
mavonEditor.getMarkdownIt()
或者
mavonEditor.mixins[0].data().markdownIt

方法3：通过mavonEditor的实例获取

 <mavonEditor ref=md></mavonEditor>
 //...
 this.refs.md.markdownIt

使用markdown-it对象

// markdownIt通过上述方式获取
markdownIt.set({ breaks: false });

设置markdown换行格式必须为行尾添加两空格

跟多markdown-it设置