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