Javascript 如何在contenteditable div中输入html标签之外的内容

使用chrome，在contenteditable div中向内容的一部分添加span标签后，如果我将输入光标放在已标记的部分之后（通过单击并键入某些内容），则新字符始终附加在span标签内

像

[A]（在此处输入光标）

我想将光标设置到跨度标签之外

[A]（在此处输入光标）

下面是我的代码

$（“按钮”）。单击（函数（）{
var html=$（'div'）.text（）；
$（'div'）.html（html.replace（/\[A\]/g，[A]'）；
});
span{
颜色：红色
}

JS-Bin
ww[A]ooo
颜色

1，单击按钮，通过添加跨度标签使div中的“[A]”高亮显示。
2，单击div，将输入光标设置在“[A]”之后。键入内容。
3，如果您使用的是chrome，则新字符必须高亮显示。因为光标在
跨度标签。如果你使用的是firefox，它可能是高亮显示，也可能是正常的。如何将光标移出span标签以输入span[A]后面的普通字符？
不要使用外部代码引用。在你的问题中只需举一个简单的例子。查看
http://api.jquery.com/before/
和
http://api.jquery.com/after/