一、介绍
v-md-editor 是基于 Vue 开发的 markdown 编辑器组件
二、安装与注册
即支持vue2.0的项目也支持vue3.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);
});
三、在组件内的使用
需要解析的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 全屏