vue-meditors使用教程

1、安装组件包

下载vue-meditors组件包

npm i vue-meditors

2、使用组件

然后在你的vue页面引入MarkDown

import MarkDown from 'vue-meditors'

components:{
    MarkDown//引入组件
},
data() {
      return {
        placeholderValue:"请输入问题描述",//placeholder的内容
        initialValue: "",//，markdown默认值
        theme: 'OneDark'//主题
      };
    },

然后在页面通过mark-down标签来使用组件

<template>
    <mark-down @on-save="save" ref="md" @on-change="changeImg"
    :theme="theme" :initialValue="initialValue" 
    :placeholderValue="placeholderValue"/>

    <div @click="saveMd()">保存</div>
</template>

3、获取内容

这里面通过$ref属性可以获取子组件的DOM,也可以获取子组件的实例，从而调用子组件的方法

它是通过调用子组件的一个保存方法handleSave，从而触发on-save事件，并返回一个对象，里面包含了三个属性

value // 编辑器输入的原始内容
html // 右侧现实的问转义后的内容
theme // 保存时的主题名字

我们通过点击保存，首先调用markdown子组件的保存方法handleSave

 saveMd(){
        console.log(this.$refs.handleSave)
        this.$refs.md.handleSave();
      }

然后会触发一个回调函数on-save，这里对应我们的save方法，从而获取markdown编辑器的内容

save(content){
        console.log("原始内容:"+content.value);
        console.log("转义后的内容:"+content.html);
        console.log("主题theme:"+content.theme);
      },

打印如下

原始内容：fsdafdsf

转义后的内容：<p>fsdafdsf</p>

主题theme：themeOneDark

获取到markdown编辑器的内容后就可以进行传递给后台等操作了

4、上传图片

上一篇说了通过点击图片图标会弹出选择图片对话框，选择图片后会传递一个on-change事件给我们，所以我们只要监听on-change事件即可，它会将文件对象传递给我们，图片上传后的地址url通过回调函数callback返回，如下：

 changeImg(files,callback){
        console.log(files)
        //图片上传
	....
	var url = data.url;
        callback(url);//通过callback回调将图片地址返回
      }

打印结果：

获取到图片之后就可以进行与后台交互的操作了

源码我push到了我的github和码云上，有兴趣的同学可以看看

Github

码云

访问我的达人课

我的微信公众号