最近自行研究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 = ''