<!--main.vue!-->
<template>
  <div>
    <Editor v-model="value"/>
  </div>
</template>

<!--editor.vue!-->
<template>
  <div>
    <div
      class="editor"
      contenteditable="true"
      @input="input"
    />
  </div>
</template>
<script>
export default {
  computed: {
    editor() {
      return this.$refs.editor || {}
    }
  },
  methods: {
    input(e) {
      this.$emit('input', this.getEditorHtml())
    },
    getEditorHtml() {
      return this.editor.innerHTML || ''
    }
  }
}
</script>
<style lang="less" scoped>
.editor{
  overflow-y: auto;
  background: #F4F6FB;
  border-radius: 4px;
  border: 1px solid transparent;
  min-height: 40px;
  max-height:200px;
  padding: 14px 9px;
  line-height: 20px;
  &:empty{
    &::before{
      content:'輸入你想對他/她說的話，然后@她！';
      color: #999;
    }
  }
  &:focus{
    outline: none;
    border-color: #3656C6;
    border-radius: 4px;
  }
}
</style>

input(e) {
  if (e.data === '@') {
    // 彈出用戶選擇框
    this.$refs.UserList.show()
    // 失去焦點，退出手機的軟體鍵盤
    this.editor.blur()
  }
  this.$emit('input', this.getEditorHtml())
},

userItemClick(item) {
  const dom = this.createAtDom(item)
  this.$refs.editor.innerHTML = this.$refs.editor.innerHTML + dom.outerHTML
  this.$refs.UserList.close()
},
createAtDom(item) {
  const dom = document.createElement('span')
  dom.classList.add('active-text')
  // 這里的contenteditable屬性設置為false，刪除時可以整塊刪除
  dom.setAttribute('contenteditable', 'false')
  // 將id存儲在dom元素的標簽上，便于后續(xù)數(shù)據(jù)處理
  dom.setAttribute('data-id', item.id)
  dom.innerHTML = `&nbsp@${item.name}&nbsp`
  return dom
},

//改造input函數(shù)
input(e) { 
  if (e.data === '@') {
    // 保存焦點位置
    this.saveIndex()
    // 彈出用戶選擇框 
    this.$refs.UserList.show() 
    // 失去焦點，退出手機的軟體鍵盤
    this.editor.blur() 
  }
  this.$emit('input', this.getEditorHtml()) 
},
// 添加saveIndex方法
async saveIndex() {
  // 獲取selection對象
  const selection = getSelection()
  // 保存當前焦點的位置
  this.selectionIndex = selection.anchorOffset
},

// 改造userItemClick函數(shù)
userItemClick(item) {
  const dom = this.createAtDom(item)
  this.addData(item)
  this.$refs.UserList.close()
},
// 添加dom節(jié)點到指定位置
addData(item){
  const html = this.editor.innerHTML
  const leftInnerHtml = html.substring(0, this.selectionIndex - 1)
  const dom = this.createAtDom(item)
  const rightInnerHtml = html.substring(this.selectionIndex, html.length)
  this.editor.innerHTML = leftInnerHtml + dom.outerHTML + rightInnerHtml
}

// 改造一下saveIndex
async saveIndex() {
  const selection = getSelection()
  this.selectionIndex = selection.anchorOffset
  const nodeList = this.editor.childNodes
  // 保存當前編輯的dom節(jié)點
  for (const [index, value] of nodeList.entries()) {
    // 這里第二個參數(shù)要配置成true，沒配置有其他的一些小bug，這里不展開講，詳細可以看文檔
    if (selection.containsNode(value, true)) {
      this.dom = value
      this.domIndex = index
    }
  }
},

// 改造一下addData方法
addData(item) {
  const html = this.dom.textContent
  const leftText = html.substring(0, this.selectionIndex - 1)
  const dom = this.createAtDom(item)
  const rightText = html.substring(this.selectionIndex, html.length)
  this.dom.textContent = leftText + dom.outerHTML + rightText
},

addData(item) {
  const text = document.createDocumentFragment()
  const span = document.createElement('span')
  const html = this.dom.textContent
  // 左邊的節(jié)點
  const textLeft = document.createTextNode(html.substring(0, this.selectionIndex - 1) + '')
  // 這里如果textLeft是個空的文本節(jié)點，會導致@用戶無法刪除，這里添加一個判斷，如果是空，則插入一個空的span節(jié)點
  text.appendChild(textLeft.textContent ? textLeft : span)
  // 加入@人的節(jié)點
  text.appendChild(this.createAtDom(item))
  // 右邊的節(jié)點
  const textRight = document.createTextNode(html.substring(this.selectionIndex, html.length))
  textRight.textContent && text.appendChild(textRight)
  this.editor.insertBefore(text, this.dom)
  this.editor.removeChild(this.dom)
},