vue实现图文混合输入

最新推荐文章于 2025-05-13 15:34:31 发布

壹加贰

最新推荐文章于 2025-05-13 15:34:31 发布

阅读量1.6k

点赞数 3

CC 4.0 BY-SA版权

文章标签： vue.js javascript

本文链接：https://blog.youkuaiyun.com/One_And_One/article/details/106636306

该博客详细介绍了如何使用Vue.js和JavaScript实现图文混合输入的功能。通过设置div的contenteditable属性，使用户可以在div中编辑内容。借助document.execCommand方法插入图片，结合HTML和JS代码，最终达到预期效果。只需调整样式，即可满足具体需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求

实现的原理

1.利用div的contenteditable属性,让div可编辑

2.document.execCommand（）方法插入图片

实现过程

html

<!-- 我这里是监听鼠标右键 -->
<div class="input-panel" ref="msgInputContainer" @contextmenu.prevent="mouseclick()" contenteditable="true" spellcheck="false" style="  width: 100%;height: 200px;border: 2px solid red;"></div>

js

  methods:{
    mouseclick(){
      let imgSrc =  require('../assets/logo.png')
      let imgTag = `<img src="${imgSrc}">`
      let ss = document.execCommand("insertimage", false, imgSrc);//填写真实图片地址，图片将会插入到编绎模式下的$('#div')中，位置在鼠标光标处
    }
  }