给可编辑的div添加绑定事件

最新推荐文章于 2025-03-15 16:41:30 发布

原创最新推荐文章于 2025-03-15 16:41:30 发布 · 1.7k 阅读

本内容遵循CC 4.0 BY-SA版权协议

本文介绍了如何在HTML中创建一个可编辑的div元素，通过设置contenteditable属性为"true"。接着，讲述了如何为这个div添加事件绑定，包括表格单元格的class添加、div的输入和粘贴事件以及图片的双击事件处理，以增强交互性和功能。

div可编辑，contenteditable=“true”

给table的单元格添加class

	setCellClass ({ row, column }) {
    	return 'free-edit-td no-format-td'
    }

添加div的输入和粘贴事件
添加div中的图片的双击事件

imageEditor () {
      this.$nextTick(() => {
        let tds = document.querySelectorAll('.free-edit-td')
        for (let i = 0; i < tds.length; i++) {
          const td = tds[i]
          const editDiv = td.querySelector('[contenteditable=true]')
          if (editDiv) {
            const events = ['input', 'paste']
            this.$lodash.forEach(events, event => {
              editDiv.addEventListener(event, divEvt => {
                const images = divEvt.target.querySelectorAll('img')
                for (let i = 0; i < images.length; i++) {
                  const img = images[i]
                  if (!img.ondblclick) {
                    img.addEventListener('dblclick', event => {
                    // 获取到双击的图片，进行相应的处理
                      this.image = event.target
                    })
                  }
                }
              })
            })
          }
        }
      })
    }

添加div中的输入事件

 cfmItemNoFormat () {
      this.$nextTick(() => {
        let tds = document.querySelectorAll('.no-format-td')
        for (let i = 0; i < tds.length; i++) {
          const td = tds[i]
          const editDiv = td.querySelector('[contenteditable=true]')
          if (editDiv && !editDiv.input) {
            editDiv.addEventListener('input', divEvt => {
              // 获取到div中的文字内容，处理后再反向绑定
              editDiv.textContent = editDiv.textContent.toString()
              // 获取div的焦点，移动到最后
              editDiv.focus()
              const sel = window.getSelection()
              const range = document.createRange()
              range.selectNodeContents(editDiv)
              range.collapse(false)
              sel.removeAllRanges()
              sel.addRange(range)
            })
          }
        }
      })
    }

标签

#vue #js