Vue Vditor

一款基于vditor实现的vue版本的markdown编辑器，支持在Vue2.0和Vue3.0中使用。

Vditor预览地址

功能需求

• 支持 Markdown 语法、兼容 HTML
• 支持多种编辑模式，需要有即时渲染、分屏预览模式
• 支持 xss 安全过滤
• 支持主题切换并提供多套主题
• 针对不同应用场景可支持简洁模式、全功能模式切换
• 预留文件在线预览功能（需后台功能支持）
• 支持附件上传（需提供文件服务），并对常见格式附件图标渲染
• 支持图片全屏预览功能

使用方法

安装

# Vue3 不用安装 @vue/composition-api
npm install -S vue-vditor vditor @vue/composition-api

使用

import 'vditor/dist/index.css';
import VueVditor from 'vue-vditor';

Vue.use(VueVditor);

<VueVditor v-model="content" :options="options" @after="handleAfter" class="editor"></VueVditor>

配置

• Props

属性|必须|说明|类型|默认值 :---:|:---:|:---:|:---:|:---: mode|false|编辑器模式，支持完整（full）、简洁（simple）、移动端模式（mobile）|String|'full' v-model|false|内容，响应式的|String|'' options|false|编辑器配置，详细请看Vditor API|Object|

• Events

名字|说明 :---:|:---: after(editor: Vditor)|编辑器异步渲染完成后的回调方法，可通过参数获取编辑器实例，调用编辑器method input(value: string)|输入后触发 focus(value: string)|聚焦后触发 blur(value: string)|失焦后触发 esc(value: string)|esc 按下后触发 ctrlEnter(value: string)|⌘/ctrl+enter 按下后触发 select(value: string)|编辑器中选中文字后触发

• Methods

支持Vditor全部Methods，可通过after获取到Vditor实例，然后调用其method：

<VueVditor v-model="content"  @after="handleAfter"></VueVditor>

let vueEditor = null;
function handleAfter(editor: Vditor) {
  vueEditor = editor;
}
// 插入内容
vueEditor.insertValue('![](https://gitee.com/letwrong/Picture/raw/master/20210331155321.jpg)');
// 获取内容
vueEditor.getValue()
// ...更多method请查看Vditor文档