关于javascript:wangEditor代码块光标插入括号中间问题

wangEditor 可通过动静插入代码块来实现编辑性能
如下图所示

可通过双击增加简单文字
代码如下

val = `<b ${'简单文字'}#</b>`
this.editor.cmd.do('insertHTML', val)

然而在插入符号 特地是 ‘{} 、()’等蕴含内容的符号时，须要将光标挪动到括号两头。
刚开始认为是小问题，网上寻找答案
……
其中讲的最多的 便是 通过 window.getSelection()、Range等的相干内置办法
接下来便是踩坑：
如 光标在后面

const selection = window.getSelection() || document.getSelection()
var currentRange = selection.getRangeAt(0)
var ele = currentRange.startContainer.parentElement
selection.removeAllRanges()
var yrange = document.createRange()
yrange.selectNodeContents(ele)
yrange.setEnd(ele, 0)
selection.addRange(y![bbb.gif](/img/bVcR0BD)

扭转yrange.setEnd(ele, 1)

就是不能达到咱们的成果
起初 通过重复测试，得出一个不确定论断:
wangEditor 配合selection 操作的是整个dom 而不是dom的内容！
目前在我这个我的项目中是这样

只有思维不滑坡 办法总比艰难多

扭转不了wangEditor 和selection 只能扭转本人的写法

于是 我在双击拿到括号时做了如下操作：
将括号离开 分成两个dom

//将括号离开
const str1 = data[0].fname.slice(0, data[0].fname.length - 1)
const str2 = data[0].fname.slice(data[0].fname.length - 1, data[0].fname.length)

//最重要局部~！！！！
this.editor.cmd.do('insertHTML', `<span >&nbsp${str1}</span><span >${str2}&nbsp</span>`)
//插入光标
const selection = window.getSelection() || document.getSelection()
var currentRange = selection.getRangeAt(0)
var ele = currentRange.startContainer.parentElement
selection.removeAllRanges()
var yrange = document.createRange()
yrange.selectNodeContents(ele)
yrange.setEnd(ele, 0)
selection.addRange(yrange)

成果如下

实现！