关于UEditor编辑器插入uNode后光标问题

Question

功能为在编辑器指定的位置插入自定义变量，变量显示被{}框住并显示为蓝色，我的代码编写如下

var textNode= new UE.uNode({
      type:'text',
            data:varKeyStr,
});
var spanNode= new UE.uNode({
            id:"varKey",
            type:'element',
            tagName:'span',
            attrs:{
                style:'color:blue;',
                id:nodeId
            }
});
spanNode.appendChild(textNode);
modelView.focus();
modelView.execCommand('inserthtml',spanNode.toHtml());

其前台显示效果为

但是当鼠标点击在{bxr}周围进行输入时，会将输入值填写到textNode中

希望效果为

希望各位大神指教

Answer 1

参考GPT和自己的思路：

你好，针对你的问题，我的回答如下：

首先，根据你的代码，可以看出在执行inserthtml命令时，是将整个spanNode插入编辑器中的，而不是只插入textNode。因此，当你在{bxr}周围进行输入时，输入的内容自然会被填写到textNode中。

为了解决这个问题，你可以尝试将textNode和spanNode分别插入编辑器，具体的做法如下：

1. var textNode= new UE.uNode({
2. type:'text',
3. data:varKeyStr,
4. });
5. var spanNode= new UE.uNode({
6. id:"varKey",
7. type:'element',
8. tagName:'span',
9. attrs:{
10. style:'color:blue;',
11. id:nodeId
12. }
13. });
14. spanNode.appendChild(textNode);
15. modelView.focus();
16. var range = modelView.selection.getRange();
17. range.selectNodeContents(textNode);
18. modelView.selection.clearRange();
19. modelView.selection.getRange().insertNode(spanNode);
20. modelView.selection.getRange().setEndAfter(spanNode).collapse(true);
21. modelView.selection.clearRange();
22. modelView.selection.getRange().selectNodeContents(spanNode);
23. modelView.selection.setCursor();

这样，textNode和spanNode就会被分别插入编辑器，并且当你在{bxr}周围进行输入时，输入的内容就会被填写到spanNode中了。

希望我的回答能够解决你的问题，如果还有其他问题，请随时提出，我会尽力回答。