關於vue2非表單元素使用contenteditable="true"(富文本編輯器雛形)

最近自行研究chat的開發,後端用go,前端用vue,用戶消息發送框須要用到富文本編輯器,我須要的東西很簡單:

• 能夠寫文字,能夠發表情、圖片和文件
• 能夠發表情、圖片和文件
• 能夠黏貼剪切板的文字和圖片

通常富文本編輯器有更豐富的格式化工具,功能太多餘,定製也麻煩.乾脆本身開發,說幹就幹.

上代碼:

<pre  contenteditable="true" v-html="sendContent"></pre>

用pre的理由:不但願用戶黏貼html代碼後直接把效果顯示出來
用v-html的理由:圖片要顯示
其餘理由:部分代碼黏貼還能原樣顯示

碰到沒法使用v-model綁定的問題,而後找了幾篇關於這方面的文章:
https://segmentfault.com/a/11...
https://segmentfault.com/a/11...

結果都有問題,包括做者後面更新的最終版的代碼,仍是存在問題.

我只是要一個能夠寫內容,而後能夠讀內容的容器.因此有了如下簡單粗暴的作法.

<template>
  <pre ref="sendContent" contenteditable="true" v-html="sendContent" @keyup.shift.enter="sendMsg"></pre>
</template>
<script>
export default {
  data () {
    return {
      sendContent: ''
    }
  },
  methods: {
    /* // 使用emoji字符串作表情
    addFace (face) {
      this.$refs.sendContent.innerHTML += face
      this.visibleFace = false
    }, */
    sendMsg () {
      let content = this.$refs.sendContent.innerHTML
      if ((content.length) > 1200) {
        alter('您輸入的內容過長,沒法發送')
        return false
      }
      this.$emit('send', this.sendContent)
      // this.sendContent = ''無效
      this.$refs.sendContent.innerHTML = ''
    }
  }
}
</script>

代碼到這裏就結束了,沒有光標問題和其餘問題,整個過程只v-html只爲賦值,後面的取值都用this.$refs.sendContent.innerHTM,只需注意清空值的時候不能用this.sendContent = ''