如何在Vue中加入Markdown编辑器

最新推荐文章于 2024-05-21 16:24:30 发布

Aladdin99

最新推荐文章于 2024-05-21 16:24:30 发布

阅读量603

点赞数 1

分类专栏：点滴经验文章标签： markdown

本文链接：https://blog.csdn.net/qq_39994421/article/details/102476584

版权

点滴经验专栏收录该内容

9 篇文章 1 订阅

订阅专栏

1、安装mditor
获取插件地址

2、在main文件中引入mditor

import mditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
Vue.use(mditor)

3、使用mditor

<mavon-editor v-model="content" :toolbars="toolbars" style=""/>

4、data中配置markdown的编辑器功能

toolbars: {
	bold: true, // 粗体
	italic: true, // 斜体
	header: true, // 标题
    underline: true, // 下划线
    mark: true, // 标记
    superscript: true, // 上角标
    quote: true, // 引用
    ol: true, // 有序列表
    ink: true, // 链接
    imagelink: true, // 图片链接
    help: true, // 帮助
    code: true, // code
    subfield: true, // 是否需要分栏
    fullscreen: true, // 全屏编辑
    readmodel: true, // 沉浸式阅读
    /* 1.3.5 */
    undo: true, // 上一步
    trash: true, // 清空
    save: true, // 保存（触发events中的save事件）
    /* 1.4.2 */
    navigation: true // 导航目录
}