关于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 = ''