vue 实现在光标处插入内容如文本,标题,时间等

vue 实现在鼠标处插入内容如文本,标题,时间等

效果图如下

代码如下

<template>
  <div>
    <div class="el-textarea">
      <textarea
        v-model="content"
        id="textarea"
        type="textarea"
        rows="2"
        autocomplete="off"
        ref="singleText"
      ></textarea>
      <button @click="insert('<内容>')" type="button">插入内容</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      content: "",
    };
  },
  watch: {
    content() {
      var textarea = document.getElementById("textarea");
      this.makeExpandingArea(textarea);
    },
  },
  methods: {
    async insert(myValue) {
      const myField = this.$refs.singleText;
      if (myField.selectionStart || myField.selectionStart === 0) {
        var startPos = myField.selectionStart;
        var endPos = myField.selectionEnd;
        this.content =
          myField.value.substring(0, startPos) +
          myValue +
          myField.value.substring(endPos, myField.value.length);
        await this.$nextTick(); // 这句是重点, 圈起来
        myField.focus();
        myField.setSelectionRange(
          endPos + myValue.length,
          endPos + myValue.length
        );
      } else {
        this.content += myValue;
      }
    },
    // 这里做随内容自动撑开
    makeExpandingArea(el) {
      var timer = null;
      //由于ie8有溢出堆栈问题，故调整了这里
      var setStyle = function (el, auto) {
        if (auto) el.style.height = "auto";
        el.style.height = el.scrollHeight + "px";
      };
      var delayedResize = function (el) {
        if (timer) {
          clearTimeout(timer);
          timer = null;
        }
        timer = setTimeout(function () {
          setStyle(el);
        }, 200);
      };
      if (el.addEventListener) {
        el.addEventListener(
          "input",
          function () {
            setStyle(el, 1);
          },
          false
        );
        setStyle(el);
      } else if (el.attachEvent) {
        el.attachEvent("onpropertychange", function () {
          setStyle(el);
        });
        setStyle(el);
      }
      if (window.VBArray && window.addEventListener) {
        //IE9
        el.attachEvent("onkeydown", function () {
          var key = window.event.keyCode;
          if (key == 8 || key == 46) delayedResize(el);
        });
        el.attachEvent("oncut", function () {
          delayedResize(el);
        }); //处理粘贴
      }
    },
  },
};
</script>

<style lang="scss">
.el-textarea {
  width: 100%;
  textarea {
    width: 100px;
    overflow: auto;
    word-break: break-all; //解决兼容问题
  }
}
</style>

你Get了啵 T_T