vue使用contenteditable 实现光标处插入自定义图片

最新推荐文章于 2024-09-04 17:50:23 发布

鳄鱼吃了我的房子

最新推荐文章于 2024-09-04 17:50:23 发布

阅读量2.6k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue js 文章标签： vue js javascript

本文链接：https://blog.csdn.net/JasonAlonk/article/details/112049243

js 同时被 2 个专栏收录

17 篇文章

订阅专栏

vue

7 篇文章

订阅专栏

本文介绍了一个Vue组件，通过contenteditable属性实现用户在短信模板编辑中选择插入姓名、日期等自定义标签的功能，类似于富文本编辑器插入图片。通过监听click和input事件，结合DOM操作在光标位置插入图片标签。

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

vue使用contenteditable 实现光标处插入自定义图片

前几天接到一个需求，要自定义编辑短信模板但是里面有姓名，日期这样的标签，为了用起来方便于是决定让用户自己选中插入，类似富文本插入图片那样，好了废话不多说，展示。

<template>
  <div class="content-padding">
    <div class="shortMessage-tag">
      <!-- 插入图片的标签 -->
      <img @click="handleTag" :src="require('../../../static/images/name.png')">
    </div>
    <div
      @click="handleSelection"
      @input="handleSelection"
      class="shortMessage-div_input"
      contenteditable="true">
        <div>请输入</div>
    </div>
  </div>
</template>

<script>
import '../../assets/styles/vip/module/welfare.scss'
export default {
  data() {
    return {
      selection: null,
      range: null,
      textNode: null,
      rangeStartOffset: null
    }
  },
  methods: {
    // 点击要插入的图片
    handleTag(e) {
      const parseDom = this.parseDom(
        `<img @click="handleTag" src="${require('../../../static/images/name.png')}">`
      )
      // 在光标处插入dom
      this.range.insertNode(parseDom)
      // 光标开始和光标结束重叠
      this.range.collapse(true)
    },
    // 记录光标位置等 （debounce防抖提升性能）
    handleSelection() {
      this.selection = getSelection()
      // 光标对象
      this.range = this.selection.getRangeAt(0)
      // 获取光标对象的范围界定对象
      this.textNode = this.range.startContainer
      // 获取光标位置
      this.rangeStartOffset = this.range.startOffset;},
    // 转dom对象
    parseDom(arg) {
      var objE = document.createElement("div");
      objE.innerHTML = arg;
      return objE.childNodes[0];
    }
  }
}
</script>