//光标位置插入 content
var insertContent = function (content) {
if (content) {
var sel = window.getSelection();
if (sel.rangeCount > 0) {
var range = sel.getRangeAt(0); //获取选择范围
range.deleteContents(); //删除选中的内容
var el = document.createElement("div"); //创建一个空的div外壳
el.innerHTML = content; //设置div内容为我们想要插入的内容。
var frag = document.createDocumentFragment(); //创建一个空白的文档片段,便于之后插入dom树
var node = el.firstChild;
var lastNode = frag.appendChild(node);
range.insertNode(frag); //设置选择范围的内容为插入的内容
var contentRange = range.cloneRange(); //克隆选区
contentRange.setStartAfter(lastNode); //设置光标位置为插入内容的末尾
contentRange.collapse(true); //移动光标位置到末尾
sel.removeAllRanges(); //移出所有选区
sel.addRange(contentRange); //添加修改后的选区
}
}
};
//调用
insertContent("<span>ddd</span>") or insertContent("ddd")
获取光标位置
var getPosition = function (elem
contenteditable=“true“ ---->window.getSelection() 获取光标位置 & 光标位置插入内容
最新推荐文章于 2023-07-18 20:52:04 发布
本文详细介绍了如何在contenteditable元素中使用window.getSelection()方法获取光标位置,并展示了如何在特定光标位置插入内容,这对于富文本编辑器的实现至关重要。
摘要由CSDN通过智能技术生成