点击按钮，在input框在光标位置插入文字，系列问题待解决

想制作一个公式设计器，需要在文字的对应位置插入按钮对应的文字，效果如下：

遇到的问题：

1. 如何获取光标位置，并在对应位置插入内容

两种情况：
（1）用户点击位置后，在光标位置插入内容
（2）用户选中几个字之后点击按钮进行文字替换
解决：
selectionStart和selectionEnd可以获取到当前元素光标的起始位置。

    //对应光标位置插入文字
    insert(val) {
      let dom = document.getElementById("formula-textarea");
      //IE浏览器
      if (document.selection) {
      } else {
        //Chrome等浏览器
        this.textarea =
          this.textarea.substring(0, dom.selectionStart) +
          val +
          this.textarea.substring(dom.selectionEnd, dom.textLength);
      }
    },

2. 多次插入时位置更改

写好之后发现点击按钮可以插入成功，但是如果连续点击按钮进行插入操作：

第一次插入的文字会在光标位置，再次点击按钮时，光标会自动回到输入框的最开始，之后几次点击都会从输入框最开始进行插入。

这种情况，如果添加变量，记录上次的点击位置及添加字段的长度，每次点击的时候都往上次插入的位置插入文字。但是这么一来，如果用户点击了别的地方想插入文字就无法获取了。此时引起问题3。

3. 组件使用了element-ui，el-button

我将el-button换成div后添加相同的点击事件后，上面的问题就没有出现了。此时的现象表现为：

第一次插入的文字会在光标位置，再次点击按钮时，光标会自动回到输入框文字的最后，之后几次点击都会从输入框文字最后进行插入。

这么一来符合了使用习惯，但是又出现一个问题4。

4. 阻止元素被选中（阻止元素被选中后表现如问题2，未解决）

多次点击一个按钮的时候，元素文字会被选择，这是由于div的缘故。所以我需要阻止元素被选中，这样div做的按钮表现就和封装好的按钮表现一样了。
参考了大佬博文阻止元素被选中：

//阻止特定区域的内容被选中
var elem = document.getElementById('elemId');
elem.onselectstart = function () {
    return false;
};

添加阻止事件后，表现为问题2。
我没有看源码，但按钮组件封装时应该也是采用了阻止元素内容被选中的方法。

还在问题还在解决中。。。