xiaoshi_system/src/views/components/common/RichText/index.vue

<template>
  <div>
    <div class="edit-box div_MAX_Height" contenteditable="true" :placeholder="placeholder" v-html="content" :key="keys" :id="keys"
        @blur="saveValue($event)" @click="getFocus($event)" v-on:paste="handlePaste($event)">
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props:{
        value:{
            type:String,
            default:(value)=>{
                  return ""
            }
        },
        placeholder:{
            type:String,
            default:()=>{
                return "请输入"
            }
        },
        keys:{
          type:String,
          default:()=>{
            const len = 6
            const codeList = []
            const chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz0123456789'
            const charsLen = chars.length
            for (let i = 0; i < len; i++) {
              codeList.push(chars.charAt(Math.floor(Math.random() * charsLen)))
            }
            return  codeList.join('')
          }
        }
    },
  data() {
    return {
        content: this.value||"", // 内容
    };
  },
  watch: {
    value(val){
      this.content = val
    },
  },
  computed: {},
  created() {},
  mounted() {},
  methods: {
    open(){
      console.log(1)
    },
   async handlePaste(event){
      
      const items = (event.clipboardData || window.clipboardData).items;
      let file = null;
      if (!items || items.length === 0) {
        this.$message.error("当前浏览器不支持本地");
        return;
      }
      for (let i = 0; i < items.length; i++) {
        // if (items[i].type.indexOf("text") !== -1) {
        //   var text =  (e.originalEvent || e).clipboardData.getData('text/plain') || prompt('在这里输入文本');
        //   //清除回车
        //   text = text.replace(/\[\d+\]|\n|\r/ig,"")
        //   var content = event.target.innerHTML
        //   var str2 = content.slice(0, index.endOffset) + text + content.slice(index.endOffset);
        //   event.target.innerHTML = str2
        //   this.saveValue(event)
        //   // this.$forceUpdate()
        //   // if(this.tableHeight){
        //   //   this.setHeight()
        //   // }
        //   break;
        // }
        if (items[i].type.indexOf("image") !== -1) {
          var e = event || window.event
          e.preventDefault();
          file = items[i].getAsFile();
          break;
        }
      }
      if (!file) {
        return;
      }
      var content = event.target.innerHTML
      var str = await this.fileToBase64(file)
      var randNum=Math.floor(Math.random()*(9999-1000))+1000;;
      var new_img = '<img key="'+ randNum +'" src="' + str + '" style="width:80px;height: 80px;border: 1px solid #f9f6f675;vertical-align:middle">';

      // 创建新的光标对象
//       var range = document.createRange();
//                 // 将光标对象的范围界定为新建的表情节点
//                 range.selectNodeContents(new_img);
//                 // 定位光标位置在表情节点的最大长度位置
//                 range.setStart(new_img, new_img.length);

//                 // 将选区折叠为一个光标
//                 range.collapse(true);
//                 // 清除所有光标对象
//                 selection.removeAllRanges();
//                 // 添加新的光标对象
//                 selection.addRange(range);
// console.log(event.target.innerHTML)
      var index = window.getSelection().getRangeAt(0)
      var indexText = this.getColumn(event.target,window.getSelection())
      var index2 = 0
      var str2 = content.slice(0, indexText) + new_img + content.slice(indexText);
      event.target.innerHTML = str2
      this.$nextTick(()=>{
        var selectedText = window.getSelection();
      var selectedRange = document.createRange();
      try{
        for(var i=0;i<event.target.childNodes.length;i++){
          if(event.target.childNodes[i].outerHTML == new_img){
            index2 = i
            throw new Error()
          }
        }
      }catch{

      }
      selectedRange.setStart(event.target,index2+1);
      selectedRange.collapse(true);
      selectedText.removeAllRanges();
      selectedText.addRange(selectedRange);
      event.target.parentNode.focus(); 
      })
      
      // this.saveValue(event)
      // var selection = window.getSelection()
      // window.getSelection().addRange(this.index)
      // console.log(window.getSelection().getRangeAt(0))
     
    },
    getColumn(node, selectObj) {
      var baseNode = node;
      var anchorNodePosition = this.getPosition(baseNode, selectObj.anchorNode, selectObj.anchorOffset);
      var focusNodePosition = this.getPosition(baseNode, selectObj.focusNode, selectObj.focusOffset);
      var num = Math.min(anchorNodePosition, focusNodePosition)
      return num;
    },
    getNodes(baseNode, path) {
      // 拿到所有类型的节点
      var temPath = path;
      if (baseNode != null) {
        temPath.push(baseNode);
        if (baseNode.childNodes.length > 0) {
          for (let i = 0; i < baseNode.childNodes.length; i++) {
            this.getNodes(baseNode.childNodes[i], temPath);
          }
        }
      }
    },
    getPosition(baseNode, node, offset) {
      //根据节点获取给定node中offset位置在栏位中的实际位置
      let path = [];
      this.getNodes(baseNode, path);
      var retIdx = 0;
      for (let i = 0; i < path.length; i++) {
        if (path[i] == node) {
          retIdx += offset;
          return retIdx;
        } else {
          if (path[i].nodeType == 3) {
              retIdx += path[i].nodeValue.length;
          }else if(i!=0 && path[i].nodeType == 1){
            retIdx += path[i].outerHTML.length;
          }
        }
      }
    },
    // 将file文件上传转化为base64进行显示
    fileToBase64(file) {
        return new Promise((resolve, reject) => {
            const reader = new FileReader()
            //开始读文件
            reader.readAsDataURL(file)
            reader.onload = () => resolve(reader.result)
            // 失败返回失败的信息
            reader.onerror = error => reject(error)
        })
    },
    getFocus(event){
      event.target.parentNode.focus();
    },
    saveValue(event){
        var a  = event.target.innerHTML
        this.$emit('input',a)
    }
  },
};
</script>
<style lang="scss" scoped>
.edit-box{
  overflow-x: hidden;
    text-overflow: ellipsis;
  padding: 0 15px;
    min-height:40px;
    line-height: 40px;
    outline: #dcdfe6;
    border:1px solid #DCDFE6;
    border-radius:5px;
    div{
      height:30px !important;
      line-height: 30px !important;
    }
}
.edit-box:empty::before {
    content: attr(placeholder);
    // margin-left:15px;
    font-style: normal;
    white-space: nowrap;
    color: #cacdd4;
}
// .edit-box:focus::before {
//     content:none;
// }
</style>