编辑带有绝对定位图像的div内的文本？答案

【问题标题】：Edit text inside div with absolute positioned image inside?编辑带有绝对定位图像的div内的文本？
【发布时间】：2022-08-18 15:34:51
【问题描述】：

我有一个 div 元素，应该用来向它添加关键字。因此，我在双击时使用 div 的 contenteditable 属性。这很好用。问题是 div 内应该有一个绝对定位的图像。所以当我双击时，如果我输入一些文本，图像就会被选中并删除。

html代码如下：

<div contenteditable=\"true\" class=\"tag\"><img src=\"delete.svg\" class=\"deleteIcon\"></div>

如何防止内部图像元素的移动？使其无法选择或仅允许在文本上编辑内容。我试图将 contenteditable 设置为纯文本，但它不起作用。

标签： html css

【解决方案1】：

由于图像需要绝对定位，所以它在哪个 div 中并不重要。我使用了另一个包装div。

.deleteIcon {
  position: absolute;
  right: 0;
}

.tag {
  width: 300px;
  height: 100px;
  border: 1px solid black;
}

.tag-wrapper {
  position: relative;
  display: inline-block;
}

<div class="tag-wrapper">

  <img src="https://picsum.photos/32" class="deleteIcon">

  <div contenteditable="true" class="tag">

  </div>
  
</div>

【讨论】：