当前位置: 首页 > 工具软件 > md-editor > 使用案例 >

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

况嘉运
2023-12-01

一、介绍
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);
});
三、在组件内的使用

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

 类似资料: