关于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)

成果如下

实现！