可编辑div,文本编辑器

1.可输入div , contenteditable属性

div.inp(id=“textbox”, contenteditable, :placeholder=“placeholder”)

2.提示文字

.inp:empty:before {
content: attr(placeholder);
display: block;
color: #a9a9a9;
}

3.表情资源及css

4.插入表情
node节点的操作，光标对象，内部属性
range对象：文档的连续范围区域，如鼠标拖动选中的区域，range里的属性可以操作光标，做索引，未知的定位，输出等
selection对象：拖蓝

废话不多说，上代码

<template lang="pug">
  div
    div 文字编辑器
    div.tarea-box
      div.text-box
        div.inp-box
          div.inp(id="textbox", contenteditable, ref="textbox", :placeholder="placeholder",     @blur="saveFocus", @keyup="hang")
        div.bottom-face
          img.faceImage(:src="faceImage", @click="handleChoose")
          span.count  还可以输入{
   {
   textCount}}字
        div.expression(v-if="showFace")
          div.exp_bd
            div.exp_cont(:class="showFace? 'active':''")
              div.qq_face()
                a.face(@click="chooseQqFace('face', value, key, index)", v-for='(value, key, index) in QQFaceMap.data', v-show="index < 105", type="qq", :title="key",  :class="'qqFace'+ `${index}`") {
   {
   key}}
              div.emoji_face()
                a.face(@click="chooseQqFace('emoji', value, key, index)", v-for='(value, key, index) in EmojiFaceMap.data',  :title="key", type="emoji",  :class="'emoji'+ `${value}`") {
   {
   value}}
    div
      el-button(type="primary", @cli