mavonEditor中的工具栏的设置

最新推荐文章于 2025-06-25 15:55:53 发布

原创最新推荐文章于 2025-06-25 15:55:53 发布 · 6.1k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#mavonEditor #简单的文本编辑器 #vue #工具栏

本文详细介绍了如何在项目中配置MavonEditor富文本编辑器，包括设置各种编辑功能如粗体、斜体、标题等，并展示了如何获取编辑器内文档的纯文本和HTML格式内容。

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

原理是要先在里面设置:toolbars="toolbars" ，然后在return中写

<mavon-editor ref=md @imgAdd="$imgAdd" @imgDel="$imgDel" :toolbars="toolbars"></mavon-editor>

return {
      toolbars: {
        bold: true, // 粗体
        italic: true, // 斜体
        header: true, // 标题
        underline: true, // 下划线
        strikethrough: true, // 中划线
        mark: true, // 标记
        superscript: true, // 上角标
        subscript: true, // 下角标
        quote: true, // 引用
        ol: true, // 有序列表
        ul: true, // 无序列表
        link: true, // 链接
        imagelink: true, // 图片链接
        code: false, // code
        table: true, // 表格
        fullscreen: true, // 全屏编辑
        readmodel: true, // 沉浸式阅读
        htmlcode: true, // 展示html源码
        help: true, // 帮助
        /* 1.3.5 */
        undo: true, // 上一步
        redo: true, // 下一步
        trash: true, // 清空
        save: true, // 保存（触发events中的save事件）
        /* 1.4.2 */
        navigation: true, // 导航目录
        /* 2.1.8 */
        alignleft: true, // 左对齐
        aligncenter: true, // 居中
        alignright: true, // 右对齐
        /* 2.2.1 */
        subfield: true, // 单双栏模式
        preview: true, // 预览
      },
}

获取里面写的文档：this.$refs.md.d_value（纯文本格式）

this.$refs.md.d_render（html格式）