一款基于vditor实现的vue版本的markdown编辑器，支持在Vue2.0和Vue3.0中使用。
- 支持 Markdown 语法、兼容 HTML
- 支持多种编辑模式，需要有即时渲染、分屏预览模式
- 支持 xss 安全过滤
- 支持主题切换并提供多套主题
- 针对不同应用场景可支持简洁模式、全功能模式切换
- 预留文件在线预览功能（需后台功能支持）
- 支持附件上传（需提供文件服务），并对常见格式附件图标渲染
- 支持图片全屏预览功能
# Vue3 不用安装 @vue/composition-api
npm install -S vue-vditor vditor @vue/composition-apiimport '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('');
// 获取内容
vueEditor.getValue()
// ...更多method请查看Vditor文档
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent