Edit text inside div with absolute positioned image inside?-CodePudding

I have a div-element which should be used to add a keyword to it. Therefore, I am using the contenteditable attribute for the div on a double click. This works well. The problem is that there should be an absolute positioned image inside the div. So when I do a double click, the image is selected and removed if I input some text.

The html code is the following:

<div contenteditable="true" ><img src="delete.svg" ></div>

How can I prevent the removement of the inner image element? E.g. making it unselectable or allow content editable only on text. I tried to set contenteditable to plaintext-only, but it does not work.

CodePudding user response：

Since the image need to be absolutely positioned, it doesn't really matter which div it's inside. I used another wrapping div.

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

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

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

<div >

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

  <div contenteditable="true" >

  </div>
  
</div>