记一次使用mavon-editor编辑器的使用过程，添加自己的功能

富贵同学

于 2020-10-29 21:50:13 发布

阅读量2.6k

点赞数

文章标签： javascript vue.js html node.js

本文链接：https://blog.csdn.net/pw321123/article/details/109370047

版权

本文记录了一次使用mavon-editor编辑器的体验，详细介绍了如何利用插槽添加HTML，并展示了如何通过操作`this.$refs.editor.d_value`来实现自定义功能，如改变选中文本的字体颜色。同时提到了过滤HTML的方法，即在lib/core/markdown.js中将html设置为false。

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

mavon-editor编辑器使用：

导入：

import mavonEditor from 'mavon-editor';
import 'mavon-editor/dist/css/index.css'

Vue.use(mavonEditor);

使用： slot="left-toolbar-before" 插槽是在左边工具条前插入html；当然还有slot="left-toolbar-after"在左边工具条后插入html；slot="right-toolbar-before" 在右边工具条前插入html；slot="right-toolbar-after"在右边工具条后插入html；

<mavon-editor ref="editor" 
       v-model="editor.content" 
       :ishljs="false"
       :placeholder="editor.title" 
       :autofocus="editor.autofocus"
       :style="editor.css"
       @fullScreen="fullScreen($event,$event)">
       <div slot="left-toolbar-before" class="fontDiv" @mouseover="showColor">
           <i class="op-i

最低0.47元/天解锁文章