如何解决在 Rangy 包中的 onKeyPress 事件时,专注于插入的节点而不是前一个元素
我需要将光标位置放在新创建的段落的开头,同时在内容可编辑的 div 元素中触发 key down 事件。我使用 Rangy Library 获取范围并将其插入到文档片段中。我需要专注于下一个起始元素。插入符号位置应放置在插入的节点上。但它放在一个包含 div 的 break 标签上。
export const paraSplit = (Sel,Range) => {
var clone_range = Range.cloneRange();
var p = clone_range.commonAncestorContainer;
while (p && p.nodeType !== 1) {
p = p.parentNode;
}
if (p) {
// Place the end of the range after the paragraph
clone_range.setEndAfter(p);
// Extract the contents of the paragraph after the caret into a fragment
var contentAfterRangeStart = clone_range.extractContents();
// Collapse the range immediately after the paragraph
clone_range.collapseAfter(p);
// Insert the content
clone_range.insertNode(contentAfterRangeStart);
// Move the caret to the insertion point
clone_range.collapseAfter(p);
Sel.setSingleRange(clone_range);
Sel.setStart(Range.startContainer,Range.startOffset);
return true;
}
};
const ParaSplitHandler = (event) => {
if (event.key === 'Enter') {
rangy.init();
//Initializing range selections
let Sel = rangy.getSelection();
let Range = Sel.getRangeAt(0);
//ParaSplit function call on Enter event
paraSplit(Sel,Range);
}
};
<div
id='main'
onKeyPress={(event) => ParaSplitHandler(event)}
ref={createId}
>
<div
contentEditable='true'
id='para1'
className={styles.para}
spellCheck='false'
ref={focusNode}
suppressContentEditableWarning={true}
>
As your React application scales and requirements change,you need a
framework that you can depend on. Next.js allows you to seamlessly merge static sites,pre-rendered pages,and serverless functions. As your
React application scales and requirements change,you need a framework that you can depend on. Next.js allows you to seamlessly merge static sites,and serverless functions. As your React application scales and requirements change,and serverless functions.
</div>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。