javascript - 如何使两个或多个 html 元素在可编辑区域中表现为一个单元

Question

考虑您有一些内容可编辑的区域：

<div contenteditable="true">
    <p>first paragraph</p>
    <p>
        <img width='63' src='https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png'>
        <img width='63' src='https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png'>
    </p>
    <p>second paragraph</p>
</div>

如果您通过左/右箭头键开始导航，则插入符号开始在所有子元素中移动。请看这个gif动画

问题是如何让插入符号忽略子元素？或者换句话说：如何将内部的两个图像的行为作为一个图像？ jsfiddle

Answer 1

尝试将<p>包含两个图像的内容更改为<div>关闭内容编辑的内容。

<div contenteditable="false">
    <img width='63' src='https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png'>
    <img width='63' src='https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png'>
</div>

演示 - http://jsfiddle.net/tfdMt/