javascript - 在 contenteditable 中将插入符号放在图像之前/之后

Question

我有一个用于聊天的 contenteditable div。我添加了一个向文本添加表情符号的功能。 当我点击 contenteditable 中的表情符号时，我希望将插入符号放在图像之前或之后。

.chat-text-box img {
  width: 100%;
  height: 100%;
}

.chat-text-box emoji {
  width: 18px;
  height: 18px;
  display: inline-block;
}

<div class="chat-text-box" contenteditable="true">This is a emoji:&nbsp;
  <emoji class="emoji-icon" contenteditable="false" data-emoji="&amp;#x1F605;"><img draggable="false" src="https://twemoji.maxcdn.com/2/svg/1f605.svg"></emoji>
</div>

Answer 1

当文本框有 :focus

时，您可以使用伪元素 ::after 创建插入符号

关于伪元素的更多信息 MDN

.chat-text-box img {
  width: 100%;
  height: 100%;
}

.chat-text-box emoji {
  width: 18px;
  height: 18px;
  display: inline-block;
  /* added this so you can use position: absolute on the ::after */
  position: relative;
}

.chat-text-box:focus emoji::after {
  content: '>';
  display: block;
  width: 1rem;
  height: 1rem;
  position: absolute;
  bottom: 0;
  right: -1.5rem;
}

<div class="chat-text-box" contenteditable="true">This is a emoji:&nbsp;
  <emoji class="emoji-icon" contenteditable="false" data-emoji="&amp;#x1F605;"><img draggable="false" src="https://twemoji.maxcdn.com/2/svg/1f605.svg"></emoji>
</div>