关于vue2非表单元素使用contenteditable="true"(富文本编辑器雏形)

最近自行研究chat的开发,后端用go,前端用vue,用户消息发送框需要用到富文本编辑器,我需要的东西很简单:

• 可以写文字,可以发表情、图片和文件
• 可以发表情、图片和文件
• 可以黏贴剪切板的文字和图片

一般富文本编辑器有更丰富的格式化工具,功能太多余,定制也麻烦.干脆自己开发,说干就干.

上代码:

用pre的理由:不希望用户黏贴html代码后直接把效果显示出来
用v-html的理由:图片要显示
其他理由:部分代码黏贴还能原样显示

碰到无法使用v-model绑定的问题,然后找了几篇关于这方面的文章:
https://segmentfault.com/a/11&＃8230;
https://segmentfault.com/a/11&＃8230;

结果都有问题,包括作者后面更新的最终版的代码,还是存在问题.

我只是要一个可以写内容,然后可以读内容的容器.所以有了以下简单粗暴的做法.

代码到这里就结束了,没有光标问题和其他问题,整个过程只v-html只为赋值,后面的取值都用this.$refs.sendContent.innerHTM,只需注意清空值的时候不能用this.sendCOntent= ''