如何在div中编辑具有内容可编辑属性的图像？

Question

我需要在

div

中显示图像（表情符号），属性为

contenteditable

。由于某种原因，我无法使用

img

标签。只是具体案例，没有问题上下文。

以下片段包含三个案例：

1. 目标行为：可以显示图像、移动小车、删除图像
2. 错误行为：显示、不移动、不删除
3. 错误行为：显示、移动托架、不删除

如何在没有

contenteditable

标签的情况下在

img

中显示图像并具有保存移动托架和删除图像的功能？

<div contenteditable=true>
  1) img tag:  
  <img alt="Wowee" src="https://cdn.betterttv.net/emote/58d2e73058d8950a875ad027/1x">
</div>

<div contenteditable=true>
  2) span tag:  
  <span style="content: url(https://cdn.betterttv.net/emote/58d2e73058d8950a875ad027/1x)">Wowee</span>
</div>

<div contenteditable=true>
  3) span tag with "nbsp":
  <span style="content: url(https://cdn.betterttv.net/emote/58d2e73058d8950a875ad027/1x)">Wowee</span>
  &nbsp;
</div>

Answer 1

这可能有帮助：

    <div contenteditable=true>
        span tag:
        <span style="content: url(https://cdn.betterttv.net/emote/58d2e73058d8950a875ad027/1x)">Wowee</span>
        &nbsp;
    </div>

您只需要在跨度后单击一些可选区域即可添加它，或者您可以使用 css（填充等）来做到这一点。