js selection range 插入空节点后怎么调整光标位置?

Posted 2023-05-11

参考技术A

当编辑区没有获得焦点或光标处range为空时，点击加粗按钮，在光标处添加一个strong标签，之后把光标移动到strong标签内，现在在移动光标的过程出现了问题。
var frag = range.createContextualFragment(“<strong></strong>”);
var lastNode = frag.lastChild;
range.insertNode(frag);
range.setStartAfter(lastNode);
?
这里添加的strong标签是空，如果strong里加入一个 就可以获得lastChild，但现在它的lastChild是null，这样在setStartAfter时就找不到参照的lastNode对象了。
这里该如何创建空strong标签，或如何获取strong下参照节点。收起

点击加粗按钮后，在编辑区添加一个strong标签，把光标移动到strong内，继续输入时直接到strong内
如果strong内部有节点，比如文本或标签，那么frag.lastChild就会获得最后一个标签或文本节点，假设创建的是这样的标签
<strong>nbsp;</strong>
那执行insertNode后插入的html将是
光标<strong>nbsp;</strong>
继续输入的话，文字会出现在strong标签前而不是内部，也就不是加粗的，所以要调整光标位置，执行setStartAfter(lastNode)
也就是把光标设置到lastNode也就是;之后，html变成
<strong>nbsp;光标</strong>

js 选择文本

怎么用js脚本，选中文本呢？

// 获取selection对象
var selection = window.getSelection();
// 清空selection对象
selection.removeAllRanges();

// 创建一个Range实例
var ele = document.getElementById(‘blogTitle‘)
var range = new Range();
range.selectNodeContents(ele);

// selection对象设置range实例
selection.addRange(range);