vue mavon-editor编辑器自定义工具栏并插入自定义代码

木白00

已于 2023-05-20 11:32:18 修改

阅读量925

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端

于 2023-05-19 11:08:32 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_41777149/article/details/130762523

需求：

在编辑器编辑文本的时候需要首行两个字符缩进但是空格在md上不能识别需要特定的代码才可以，而客户不懂这些需要在工具栏做一个按钮来快捷生成代码。

难点：

这个功能的难点就是如何找到光标的位置进行插入代码，官方文档上面找不到相关的案列只有自定义工具栏的列子。

过程：

在找寻解决方案的试过找到textarea的class然后获取光标的当前位置，这样做确实能做出来但是有个致命问题就是不能连续的点击添加，点了一次之后光标的位置就移动到开头，这样体验很不友好，然后我试着找文档上也没有提供的获取光标位置的api，最后在别人的开源项目上面找到了解决方案。

官方文档地址：https://github.com/hinesboy/mavonEditor

代码：

<mavon-editor
  ref="md"
  v-model="form.contentMd"
>
  <template slot="left-toolbar-before">
    <button
      type="button"
      @click="addCode('&nbsp;')"
      class="el-icon-coordinate"
      aria-hidden="true"
      title="空格"
    ></button>
  </template>
</mavon-editor

addCode(content) {
      const editor = this.$refs.md
      //获取光标位置
      editor.insertText(editor.getTextareaDom(),
        {
          prefix: `${content}`,
          subfix: '',
          str: ''
        })
    },