Vue项目引入markdown编辑器

最新推荐文章于 2025-07-11 18:16:56 发布

铲车环游世界

最新推荐文章于 2025-07-11 18:16:56 发布

阅读量1.7k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：小贴士

本文链接：https://blog.youkuaiyun.com/weixin_40300591/article/details/89144170

小贴士专栏收录该内容

6 篇文章

订阅专栏

本文介绍如何通过三步轻松集成MavonEditor到Vue项目中，实现强大的Markdown编辑功能，包括粗体、斜体、标题等常用编辑工具。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

只需要简单的几步：
1.使用npm安装

npm install mavon-editor --save-dev

2.在main.js中导入

import mavonEditor from 'mavon-editor';     //markdown编辑器
import 'mavon-editor/dist/css/index.css';

然后

Vue.use(mavonEditor);

3.在组件中使用

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

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 // 导航目录
}

这样就可以使用了