contentEditable使用及遇到的问题

1. 基本使用

<template>
  <div class="comment" v-clickoutside="inputBlur">
    <div class="auth-card" @click="inputFocus" ref="inpContainer">
      <div
        ref="inputBox"
        class="input-box"
        tabindex="0"
        contenteditable="true"
        placeholder="请输入评论（Enter换行）"
        spellcheck="false"
        v-handlePastestyle
        @input="onDivInput"
      ></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      commentValue: '',
      maxLen: 120
    };
  },
}
</script>

<style scoped lang="less">
  .comment {
    width: calc(100% - 96px); // 设置宽度的作用是因为输入过长时宽度会被撑开
  }
  .auth-card {
    border: 1px solid #f4f5f5;
    background-color: #f4f5f5;
    border-radius: 2px;
    transition: all .3s;
    .input-box {
      box-sizing: border-box;
      min-height: 72px;
      padding: 8px 12px;
      font-size: 14px;
      &:empty::before {
        content: attr(placeholder); // 显示placeholder
        font-size: 14px;
        color: #86909c;
      }
      &:focus {
        border: none;
        box-shadow: none;
        outline: none;
      }
    }
  }
</style>

2. 开发中遇到的问题

2.1 聚焦、失焦

<script>
export default {
 ...
  directives: {
    clickoutside: {
      // 初始化指令
      bind(el, binding, vnode) {
        function documentHandler(e) {
          // 这里判断点击的元素是否是本身，是本身，则返回
          if (el.contains(e.target)) return false;

          // 判断指令中是否绑定了函数
          if (binding.expression) {
            // 如果绑定了函数 则调用那个函数
            binding.value(e);
          }
        }
        
        // 给当前元素绑定个私有变量，方便在unbind中可以解除事件监听
        el.vueClickOutside = documentHandler;
        document.addEventListener('click', documentHandler);
      },
      unbind(el, binding) {
        // 解除事件监听
        document.removeEventListener('click', el.vueClickOutside);

        delete el.vueClickOutside;
      }
    },
    methods: {
      /**
       * 对input框相关样式作处理
       * @param {borderColor} 边框颜色
       * @param {bgColor} 背景色
       * @param {isFocus} 是否聚焦
       */
      handleInputStatus(borderColor, bgColor, isFocus) {
        const inpContainerDOM = this.$refs.inpContainer
        inpContainerDOM.style.borderColor = borderColor;
        inpContainerDOM.style.backgroundColor = bgColor;

        const inputDOM = this.$refs.inputBox;
        isFocus ? inputDOM.focus() : inputDOM.blur();
      },
      // 点击后输入框聚焦
      inputFocus() {
        this.handleInputStatus('#1e80ff', '#fff', true);
      },
      // 输入框失焦
      inputBlur() {
        this.handleInputStatus('#f4f5f5', '#f4f5f5', false);
      },
    }
}

2.2 输入框字数超限制后，光标会移动到第一个的问题（innerText情况）

<script>
export default {
  ...
  methods: {
    ...
    // 输入框输入事件
    onDivInput(e) {
      this.commentValue = e.target.innerText.trim().replace(/(\r\n|\r|\n)/g, ' ').replace(/\s+/, ' ');
      
      const commentValueLen = this.commentValue.length;
      if (commentValueLen > this.maxLen) {
        const inpBox = this.$refs.inputBox;
        inpBox.innerText = this.commentValue = this.commentValue.slice(0, this.maxLen);

        // 解决输入框字数超限制后，光标会到第一个的问题
        if(document.all) {
          inpBox.range = document.selection.createRange();
          inpBox.range.select();
          inpBox.range.moveStart("character",-1); 
        } else {
          inpBox.range = window.getSelection().getRangeAt(0);
          inpBox.range.setStart(inpBox.range.startContainer, this.maxLen);
        }
      }
    }
  }
}
</script>

2.3 处理粘贴时会粘贴样式的问题

<script>
export default {
  ...
  directives: {
    ...
    // 处理粘贴时会粘贴样式的问题
    handlePastestyle: {
      bind(el, binding) {
        function pasteHandler(e) {
          // 阻止默认粘贴
          e.preventDefault();
          // 粘贴事件有一个clipboardData的属性，提供了对剪贴板的访问，clipboardData的getData(fomat) 从剪贴板获取指定格式的数据
          var text =  (e.originalEvent || e).clipboardData.getData('text/plain');
          // 插入
          document.execCommand('insertText', false, text);
        }

        el.pasteHandler = pasteHandler;
        el.addEventListener('paste', pasteHandler)
      },
      unbind(el, binding, vnodee) {
        el.removeEventListener('paste', el.pasteHandler);

        delete el.pasteHandler;
      }
    }
  }
  ...
}
</script>