mavon-editor实现支持md格式输入并自定义工具栏

需求说明

起源于我在做机器人报警推送的一个模块时，涉及到可以自定义报警的内容，其中内容支持md格式，同时还支持用户在指定光标处插入指定的字符串占位符。于是我在项目中引入mavon-editor库(支持Vue2、Vue3)，以支持用户输入md格式。详细的说明可以查阅官方文档链接：GitHub - hinesboy/mavonEditor: mavonEditor - A markdown editor based on Vue that supports a variety of personalized features

然后接下来我讲到的是我用到的

实现思路

• 在工具栏中增加自定义图标
• 监听自定义按钮事件
• 获取插入光标位置，插入指定占位符字符串

实现

安装

$ npm install mavon-editor --save

引入

// 指定组件中引入
import { mavonEditor } from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'


...
  components: {
    mavonEditor
  },
...

使用

需要自定义工具栏工具，可以通过使用一下插槽方式：

solt插槽名	作用
left-toolbar-before	左工具栏前加入自定义按钮
left-toolbar-after	左工具栏后加入自定义按钮
right-toolbar-before	右工具栏前加入自定义按钮
right-toolbar-after	右工具栏后加入自定义按钮

 我这里为了保持统一，我引入的也是Font Awesome字体图标，通过class的方式传入，同时可以通过toolbars属性自定义你想要的工具栏项，不需要的去掉或者赋值为false即可。

方法：

由于我这里的的md内容组件是多个且遍历循环的方式显示的，所以通过ref获取组件实例的时候需要注意，这里返回的是一个多个实例组成的数组，所以这里用到了forEach去遍历赋值。

• 获取光标位置：getTextareaDom()
• 插入指定字符：insertText(指定位置，插入字符对象)

效果图

 有兴趣的朋友可以看一下其源码，进食更方便~

这里的插槽实现正如其名，在首尾处添加具名插槽，中间部分则是以及定义好的支持的工具栏实现。