手写富文本（极简）

代码备忘录

只实现了tab增加4个空格功能的极简富文本，其他功能日后会不断完善

<template>
  <div class="edit-line">
    <div contenteditable="true" class="edit-content" placeholder="吐槽一下.." ref="edit" @keydown.tab.stopdefault="tab"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: "editor"
    };
  },
  methods: {
    tab(event) {
      // 阻止默认切换元素的行为
      if (event && event.preventDefault) {
        event.preventDefault();
      } else {
        window.event.returnValue = false;
      }
      // 获取光标的range对象 event.view 是一个window对象
      let range = event.view.getSelection().getRangeAt(0);
      // 光标的偏移位置
      let offset = range.startOffset;
      // 新建一个span元素
      let span = document.createElement("span");
      // 四个 表示四个空格
      span.innerHTML = "    ";
      // 创建一个新的range对象
      let newrange = document.createRange();
      // 设置新的range的位置，也是插入元素的位置
      newrange.setStart(range.startContainer, offset);
      newrange.setEnd(range.startContainer, offset);
      newrange.collapse(true);
      newrange.insertNode(span);
      // 去掉旧的range对象，用新的range对象替换
      event.view.getSelection().removeAllRanges();
      event.view.getSelection().addRange(range);
      // 将光标的位置向后移动一个偏移量，放到加入的四个空格后面
      range.setStart(span, 1);
      range.setEnd(span, 1);
    }
  }
};
</script>

<style lang="less" scoped>
.edit-line {
    width: 100%;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
 
  .edit-content {
    transition: width 400ms ease-in;
    width: 80%;
    height: 45px;
    outline: 0;
    padding: 0 4%;
    border: 1px solid #dddddd;
    border-radius: 12px;
    margin: 0 2%;
    overflow: auto;
    background-color: rgba(255, 255, 255, 0.4);
    font-size: larger;
    /*!*保证只能写入文本信息，不能是富文本*!*/
    /*-webkit-user-modify: read-write-plaintext-only*/
  }
 
  .edit-content:empty {
    width: 35%;
    color: lightgray;
  }
 
  .edit-content:empty::before {
    content: attr(placeholder);
  }
 
  .edit-content:focus {
    background-color: white;
    width: 80%;
}
</style>

以后其他功能会不断完善

参考 踩坑小王子