【v-md-editor入门级教程】

一、介绍
v-md-editor 是基于 Vue 开发的 markdown 编辑器组件

二、安装与注册
即支持vue2.0的项目也支持vue3.0的项目，不过两种版本的安装版本不同

• Demo
• Documentation
• 中文文档
• 国内文档镜像
• Changelog
  这里有官网的链接地址，可以查看两种版本的注册方式，介绍一下对于quasar2.0的项目如何进行注册：

import VueMarkdownEditor from “@kangc/v-md-editor”;
import “@kangc/v-md-editor/lib/style/base-editor.css”;
import vuepressTheme from ‘@kangc/v-md-editor/lib/theme/vuepress.js’;
import ‘@kangc/v-md-editor/lib/theme/style/vuepress.css’;

import { boot } from ‘quasar/wrappers’;
import Prism from ‘prismjs’;

export default boot(({ app }) => {
VueMarkdownEditor.use(vuepressTheme, {
Prism,
});
//挂载到vue中
app.use(VueMarkdownEditor);
});
三、在组件内的使用

四、常用API属性 1.text String类型

需要解析的markdown 字符串(只有预览组件支持该属性)

2.v-model String类型

双向绑定(只有编辑组件支持该属性)

3.mode String类型,默认值editable

模式（可选值：edit纯编辑模式、 editable编辑与预览模式、preview纯预览模式）

4.height String类型

正常模式下编辑器的高度

5.default-show-toc boolean类型，默认值false

是否默认显示目录导航

6.default-fullscreen boolean类型，默认值false

是否默认开启全屏

7.left-toolbar 类型：string

默认值： undo redo clear | h bold italic strikethrough quote | ul ol table hr | link image code | save
左侧工具栏
名称 说明
undo 撤销
redo 重做
clear 清空
h 标题
bold 粗体
italic 斜体
strikethrough 中划线
quote 引用
ul 无序列表
ol 有序列表
table 表格
hr 分割线
link 链接
image 插入图片
code 代码块
save 保存，点击后触发save事件
8.right-toolbar 类型：String

默认值： preview toc sync-scroll fullscreen

右侧工具栏

名称 说明
preview 预览
toc 目录导航
sync-scroll 同步滚动
fullscreen 全屏