vue-quill-editor中，怎么通过点击按钮在光标出插入文字？

Question

应项目需求，在富文本编辑的时候在边上有对应的按钮点击后可以在光标处添加固定格式的文字。
如：
在“111111”当光标在结尾处点击按钮，就会让富文本中的文字变成“111111222”如果在光变第一个“1”后面，则会变成“122211111”这种形式
我直接在点击的时候触发函数，直接在末尾添加固定格式的文字，好吧我想多了。

<template>
  <div>邮箱管理
    <quill-editor
      ref="myTextEditor"
      v-model="content"
      :config="editorOption"
      @blur="onEditorBlur($event)"
      @focus="onEditorFocus($event)"
      @ready="onEditorReady($event)"
    >
    </quill-editor>
    <el-button
      type="primary"
      @click="demo"
    >demo</el-button>
  </div>
</template>

<script>
import { quillEditor } from "vue-quill-editor";
export default {
  components: {
    quillEditor
  },
  data() {
    return {
      content: "I am Example",
      str: "",
      editorOption: {
        // something config
      }
    };
  },
  mounted() {
    console.log("this is my editor", this.content);
  },
  computed: {
    editor() {
      return this.$refs.myTextEditor.quillEditor;
    }
  },
  methods: {
    //失去焦点事件
    onEditorBlur(editor) {
      console.log("editor blur!", editor);
    },
    //获得焦点事件
    onEditorFocus(editor) {
      console.log("editor focus!", editor);
    },
    // 准备编辑器
    onEditorReady(editor) {
      console.log("editor ready!", editor);
    },
    //内容改变事件
    onEditorChange({ editor, html, text }) {
      // console.log('editor change!', editor, html, text)
      this.content = html;
    },
    demo() {
      let acc = "123456";
      this.content = this.content + acc;
    }
  }
};
</script>

大概是这样的一个形式

Answer 1

请输入代码
    onEditorChange(editor) {
      //内容改变事件
      var selection = getSelection();
      // 设置最后光标对象
      this.lastEditRange = selection.getRangeAt(0);
      console.log(this.lastEditRange);
    },
    onEditorFocus(editor) {
      //获得焦点事件
      console.log("获得焦点");
      var selection = getSelection();
      // 设置最后光标对象
      this.lastEditRange = selection.getRangeAt(0);
      console.log(this.lastEditRange);
    },
    addFormattingText(e) {
      let edit = $(".ql-editor")[0];
      console.log(edit);
      let options = e;
      console.log(options);
      edit.focus();
      let selection = getSelection();
      console.log(selection);
      console.log(this.lastEditRange);
      if (this.lastEditRange) {
        console.log(this.lastEditRange);
        console.log("文本不为空，不换行每次都出现");
        // 存在最后光标对象，选定对象清除所有光标并添加最后光标还原之前的状态
        selection.removeAllRanges();
        selection.addRange(this.lastEditRange);
      }
      if (selection.anchorNode.nodeName != "#text") {
        // 如果是编辑框范围。则创建表情文本节点进行插入
        var emojiText = e;
        // var range = document.createRange()
        // console.log(emojiText)
        console.log(edit.childNodes);
        console.log(selection.anchorOffset);
        if (edit.childNodes.length > 0) {
          // 如果文本框的子元素大于0，则表示有其他元素，则按照位置插入表情节点
          for (var i = 0; i < edit.childNodes.length; i++) {
            if (i == selection.anchorOffset && selection.anchorOffset != 0) {
              console.log("成功");
              edit.insertBefore(emojiText, edit.childNodes[i]);
            } else {
              console.log("失败");
              console.log(edit.children[0]);
              edit.children[0].appendChild(document.createTextNode(emojiText));
            }
          }
        } else {
          // 否则直接插入一个表情元素
          edit.appendChild(emojiText);
        }
        if (window.getSelection) {
          //ie11 10 9 ff safari
          edit.focus(); //解决ff不获取焦点无法定位问题
          var range = window.getSelection(); //创建range
          range.selectAllChildren(edit); //range 选择obj下所有子内容
          range.collapseToEnd(); //光标移至最后
        } else if (document.selection) {
          //ie10 9 8 7 6 5
          var range = document.selection.createRange(); //创建选择对象
          //var range = document.body.createTextRange();
          range.moveToElementText(edit); //range定位到obj
          range.collapse(false); //光标移至最后
          range.select();
        }
        // 创建新的光标对象
        // edit.focus();
        // var range = document.createRange();
        // console.log(range);

        // // 光标对象的范围界定为新建的表情节点
        // range.selectNodeContents(emojiText);
        // // 光标位置定位在表情节点的最大长度
        // range.setStart(emojiText, emojiText.length);
        // // 使光标开始和光标结束重叠
        // range.collapse(true);
        // // 清除选定对象的所有光标对象
        // selection.removeAllRanges();
        // // 插入新的光标对象
        // selection.addRange(range);
      } else {
        console.log("已选择光标");
        // 如果是文本节点则先获取光标对象
        var range = selection.getRangeAt(0);
        // 获取光标对象的范围界定对象，一般就是textNode对象
        var textNode = range.startContainer;
        // 获取光标位置
        var rangeStartOffset = range.startOffset;
        // 文本节点在光标位置处插入新的表情内容
        textNode.insertData(rangeStartOffset, e);
        //                    textNode.insertData(rangeStartOffset, emojiInput.value)
        // 光标移动到到原来的位置加上新内容的长度
        range.setStart(textNode, rangeStartOffset + e.length);
        //                    range.setStart(textNode, rangeStartOffset + emojiInput.value.length)
        // 光标开始和光标结束重叠
        range.collapse(true);
        // 清除选定对象的所有光标对象
        selection.removeAllRanges();
        // 插入新的光标对象
        selection.addRange(range);
      }
      // 无论如何都要记录最后光标对象
      this.lastEditRange = selection.getRangeAt(0);
    }

Answer 2

先看看官方文档有没有提供insertText，如果没有用document.execCommand实现

methods: {
    insertHtml (text) {
        // 1. 判断当前组件是否处于`focus`状态，如果没有则focus。
        do something...
        
        // 2. 使用`document.execCommand`方法在光标后追加文本
        document.execCommand('insertText', true, text)
    }
}

Answer 3

//获取当前模板文本域的光标位置
getCursorPosition:function(){
  _this.curTxtPoint  = this.$refs.myQuillEditor.quill.selection.savedRange.index;
},
//插入文本的方式
setCharacter:function(str,index){
  _this.curTxtPoint = '';
  this.$refs.myQuillEditor.quill.insertText(index,str);
},