需求:
在编辑器编辑文本的时候需要首行两个字符缩进但是空格在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(' ')"
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: ''
})
},