angular 2 - 在 elementRef 上设置选择

Posted 2023-03-06

【中文标题】angular 2 - 在 elementRef 上设置选择

【英文标题】：angular 2 - set a selection on an elementRef

【发布时间】：2018-04-11 11:39:38

【问题描述】：

我有这个选择：

let selection = window.getSelection();

还有这个elementRef：

@ViewChild('contentEditable') public el: ElementRef;

例如，此文本在 contenteditable elementRef 内：

这是一段文字

我在哪里选择了“一些”，然后丢失了选择，但使用 getSelection() 将其保存在选择属性中。如何将它重新设置在 elementRef 上？

【参考方案1】：

我将 input 与 contentEditable 混淆了。使用 contentEditable 您需要使用范围来获取选择并设置选择。

要获得选择：

let range = document.createRange();
range = window.getSelection().getRangeAt(0);
this.rangeClone = range.cloneRange();

这使用了 javascript 中的 Selection 和 Range 对象的组合。有关更多信息，请阅读文档：

Selection

Range

设置选择：

this.el.nativeElement.focus();
const sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(this.rangeClone);

This.el 看起来像这样：

@ViewChild('contentEditable') public el: ElementRef;