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

码云

访问我的达人课

我的微信公众号

vue-meditors使用教程相关推荐

Vue.js入门教程-组件注册
一.组件创建 1.1 创建步骤创建Vue的组件都有三个基本步骤是 [①创建组件构造器.②注册组件和③使用组件]. 1.2 基本示例比如,我们创建一个Button组件. // 1. 创建一个组件构造 ...
Vue.js入学教程
Vue.js是什么 Vue.js 是用于构建交互式的 Web 界面的库. Vue.js 提供了 MVVM 数据绑定和一个可组合的组件系统,具有简单.灵活的 API. Vue.js(类似于view)是一 ...
vue整合视频流教程
vue整合视频流教程业务需求:客户需要将监控接入到自己的app中,在市面上很多监控是不分享视频流地址的,推荐方案选择海康,大华等品牌的监控,获取到监控地址整合到自己的app中. 在开发前需要普及的一 ...
热烈庆祝《Vue.js 实战教程 V2.x（一）基础篇》上线了！
热烈庆祝<Vue.js 实战教程 V2.x(一)基础篇>上线了! 课程简介课程地址:https://edu.csdn.net/course/detail/25641 机构名称:大华软件学 ...
Vue.js入门教程（适合初学者）
Vue.js入门教程 Vue官网网址:Vue.js 中文网 Vue.js Vue.js是渐进式JavaScript 框架,是一套构建用户界面的渐进式框架.也可以说Vue.js 是一个用来构建网页界面的 ...
手把手Vue前端开发教程
手把手Vue前端开发教程本文将手把手地教你如何使用Vue进行前端开发. 简介 Vue.js 是一款渐进式 JavaScript 框架,易于上手.Vue 可以被用来开发单页面应用 (SPA) 以及简单 ...
Vue.js 系列教程 3：Vue-cli，生命周期钩子
原文:intro-to-vue-3-vue-cli-lifecycle-hooks 译者:nzbin 这是 JavaScript 框架 Vue.js 五篇教程的第三部分.在这一部分,我们将学习 Vue ...
【转】Vue.js入门教程（二）在页面中引入vue的方式
第二章:安装和基础效果展示页面中引入vue 因为我们的目标是在最短的时间之内学会vue的使用方法,所以我们不一定需要通过npm工程化进行安装,你直接用script在页面中引用也完全没有问题. 第一种 ...
vue项目实践教程1：vux项目搭建和简介
vue作为比较受欢迎的前端开发框架之一,因为其优雅的代码结构,轻量化代码设计,简介易懂的API,灵活易用的指令和属性广受前端开发者的喜爱,其学习成本和学习难度相对react来说要简单很多. 这里,笔者 ...
初步创建vue/cli工程教程
首先第一步创建vuecli工程,创建vuecli工程需要用nodejs+npm下载环境就行,这个工程非常的庞大,教程走一波! ·····先去vue官网找到下载vue/cli的命令-----官网地址:v ...

vue-meditors使用教程