junebubble 2020-04-15 10:49 采纳率: 0%
浏览 292

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

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

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中

图片说明

图片说明

希望效果为

图片说明

希望各位大神指教

  • 写回答

1条回答

  • lshen01 2023-03-16 23:08
    关注

    参考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中了。

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

    评论

报告相同问题?

悬赏问题

  • ¥100 关于使用MATLAB中copularnd函数的问题
  • ¥20 在虚拟机的pycharm上
  • ¥15 jupyterthemes 设置完毕后没有效果
  • ¥15 matlab图像高斯低通滤波
  • ¥15 针对曲面部件的制孔路径规划,大家有什么思路吗
  • ¥15 钢筋实图交点识别,机器视觉代码
  • ¥15 如何在Linux系统中,但是在window系统上idea里面可以正常运行?(相关搜索:jar包)
  • ¥50 400g qsfp 光模块iphy方案
  • ¥15 两块ADC0804用proteus仿真时,出现异常
  • ¥15 关于风控系统,如何去选择