Vue实现图片与文字混输

知识在于积累，踩坑越多，你越强😎

前言

用多了JQuery，习惯了使用JQuery的API操作DOM，几乎忘记了原生JS对DOM操作，今天在项目中遇到了文字和图片混输的情况，第一个想到的办法是用textarea实现，结果发现实现不了图片输入，然后想着找个富文本编辑器的插件实现，深思熟虑之后，我的需求好像也没那么复杂，不至于引用个插件，看了掘金的发布沸点功能，然后就模仿了其作法，于是就有了这篇文章的分享。先给大家展示下最后实现的效果😋

实现思路

• 利用div的contenteditable属性,让div可编辑
• 绑定ref属性，用于操作输入框元素
• 图片点击时，获取图片地址，使用require转换图片地址
• 创建img标签，赋值转换好的图片地址
• 从refs对象中获取到输入框元素，赋值创建好的img标签

实现过程

• 声明div可编辑，监听回车键事件，关闭拼写检查，绑定ref方便获取当前元素

  <div class="input-panel" ref="msgInputContainer" @keydown.enter.exact="sendMessage($event)"
       contenteditable="true" spellcheck="false"></div