使用 可编辑div 遇到的坑

关于输入，input和textarea可以满足我们90%以上的需求，但人有些需求无法满足。此时，我们就可以使用div等一些标签来实现

属性：contenteditable是一个枚举属性，表示元素是否可被用户编辑。 如果可以，浏览器会修改元素的部件以允许编辑。

当标签加上这个属性时，就可进行内容编辑，来实现输入的效果。并且实现placeholder效果

<div contenteditable placeholder='请输入文字'>div>

.input{
     
            width:200px;
            height:24px;
            line-height:24px;
            font-size:14px;
            padding:5px 8px;
            border:1px solid #ddd;
        }
        .input:empty::before {
     
            content: attr(placeholder);
        }

但是此时无法使用 v-model,那么该如何实现双向绑定呢？

<div contenteditable placeholder='请输入文字' v-html="item.content">div>

但是有时只想复制文本，却发现复制过来的是标签+标签样式，那么改如何处理？
contenteditable属性不止有 true 和 false。

contenteditable=""
contenteditable="events"
contenteditable="caret"
contenteditable="plaintext-only"
contenteditable="true"
contenteditable="false"

所以采用contenteditable="plaintext-only"即可

但是在输入的时候，发现光标一直聚焦在前面，改如何解决的？

<div contenteditable placeholder='请输入文字' v-html="item.content"  @input="divInput">div>

divInput(){
     
	// 光标聚焦问题
      var range = document.createRange();
      range.selectNodeContents(event);
      range.collapse(false);
      var sel = window.getSelection();
      //判断光标位置，如不需要可删除
      if (sel.anchorOffset != 0) {
     
        return;
      }
      sel.removeAllRanges();
      sel.addRange(range);
 }