您可以使用 Flexbox 解決選擇問題。我最初嘗試使用，align-items: flex-end但我得到了一些奇怪的箭頭鍵行為。align-items: baseline目前看來有效。
圖像問題很奇怪。我注意到 Chrome 對 SVG 元素的處理方式與 IMG 元素不同。截至目前，最新版本的 Chrome 在跳過 IMG 之前會“等待”，但允許用戶像任何其他字符一樣跳過 SVG（左箭頭跳過最接近 svg 的字符）。這可能是由底層默認(rèn)樣式引起的，但我不知道。
我正要發(fā)布我的發(fā)現(xiàn)，但我意識到 Firefox 的工作方式不一樣。當(dāng)使用 SVG 和/或 Flexbox 時(shí)，F(xiàn)irefox 有一些非常奇怪的箭頭鍵行為。光標(biāo)會移至圖像上方，但僅當(dāng)按向右箭頭鍵時(shí)才會出現(xiàn)。
然而，F(xiàn)irefox 可以很好地處理普通的 IMG 元素。
長話短說，您將必須根據(jù)瀏覽器渲染不同的圖像元素。
// chrome contenteditable ads spaces between spans.
// firefox does not, so you have to add them manually.
if (navigator.userAgent.indexOf("Firefox") > 0) {
Array.from(document.querySelectorAll('#editable span')).forEach(el => {
el.innerHTML += " "
})
}
.flexit {
display: flex;
align-items: baseline;
flex-wrap: wrap;
}
span {
display: inline-block;
white-space: pre;
}
.img-wrapper, .img-wrapper + span {
display: inline;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<h1>chrome</h1>
<div contenteditable="true" class="flexit">
<span>test</span><svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<image href="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" height="200" width="200"/>
</svg><span>Here</span><span>is</span><span>a</span><span>longer</span><span>sentence.</span><span>Notice</span><span>I</span><span>wrapped</span><span>each</span><span>word</span><span>in</span><span>a</span><span>span.</span><span>This</span><span>makes</span><span>the</span><span>text</span><span>appear</span><span>like</span><span>it</span><span>is</span><span>inline.</span>
</div>
<h1>firefox</h1>
<div contenteditable="true" id="editable">
<span>test</span><span class="img-wrapper"><img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" height="200" width="200" /></span><span>test</span><span>Here</span><span>is</span><span>a</span><span>longer</span><span>sentence.</span><span>Notice</span><span>I</span><span>wrapped</span><span>each</span><span>word</span><span>in</span><span>a</span><span>span.</span><span>This</span><span>makes</span><span>the</span><span>text</span><span>appear</span><span>like</span><span>it</span><span>is</span><span>inline.</span>
</div>
</body>
</html>
PS 很多編輯器我都使用默認(rèn)的全角圖像。
編輯：我剛剛意識到我的 Firefox 解決方案似乎也適用于最新的 Chrome。我認(rèn)為這是可行的，因?yàn)槲覍⑽谋竟?jié)點(diǎn)包裝在 SPAN 元素中。SVG 元素在 Chrome 中的工作方式仍然不同，但在 SPAN 中換行文本似乎解決了大部分問題。
