angular 2 - 在 elementRef 上设置选择

Question

我有这个选择:

let selection = window.getSelection();

还有这个 elementRef:

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

例如，此文本位于 contenteditable elementRef 中:

This is some text

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

Answer 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;