Javascript 如何使两个或多个html元素在可编辑区域中作为单个单元运行

假设您有一些内容可编辑区域，其中包含一些内容：

<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>

如果开始使用左/右箭头键导航，插入符号开始在所有子元素中移动。请看这个

问题是如何使插入符号忽略子元素？或者说：如何将两个图像作为一个单独的图像来表现？

在内容编辑关闭的情况下，尝试将包含两个图像的更改为

<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>

---

演示-

用它制作一个图像？