在可编辑的div标签中插入了一个作为名片的div，如何让光标自动跳过该div。

Question

需求说是要让富文本编辑器新增一个插入名片的功能，名片的html结构大概如下所示：

<div>
    <div>名片</p>
    <div>网络部-小明</p>
</div>

我在富文本编辑器插入该名片标签后，移动光标，可以逐个选取到上头的每个字。
我在三个div上都设置其contenteditable属性为false后，用键盘移动光标还是会先到“片”字后面，再到“明”字后面，最后才能到整个名片标签的后面。
我希望整个名片能够像图片一样作为一个整体，当光标在名片前面时，光标向后移动一次就直接到名片后面去。求大神指点有无比较简单的实现方法。

Answer 1

目前用了一种方式解决当前问题，虽说不是很完美的解决办法：
先把要插入的节点标签通过html2canvas转换成canvas，然后再转换为图片，通过img标签插入到可编辑的div中即可。