推荐好用的vue插件02 v-md-editor富文本编辑器

一、介绍

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

二、安装与注册

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

- [Demo](https://code-farmer-i.github.io/vue-markdown-editor/examples/base-editor.html)
- [Documentation](https://code-farmer-i.github.io/vue-markdown-editor/)
- [中文文档](https://code-farmer-i.github.io/vue-markdown-editor/zh/)
- [国内文档镜像](http://ckang_1229.gitee.io/vue-markdown-editor/zh/)
- [Changelog](https://code-farmer-i.github.io/vue-markdown-editor/changelog.html)

这里有官网的链接地址，可以查看两种版本的注册方式，介绍一下对于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);
});

三、在组件内的使用

<template>
  <div class="" style="margin: 10px; height: calc(100vh - 105px)">
    <v-md-editor v-model="data.content"    height="100%"></v-md-editor>
  </div>
</template>

四、常用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	全屏