在 contenteditable div 元素（飞镖）中设置和获取 selectionrange/caret 位置

Question

我正在尝试从我的编辑器使用 textarea 元素切换到 <div contenteditable="true"></div> 元素。我只有一个问题，那就是我不能再使用 textarea.selectionStart, textarea.selectionEnd, textarea.setSelectionRange() 了。是否有任何方法可以获取和设置 dart 中 div 元素的选择范围？或者获取插入符位置的方法？

Answer 1

import 'dart:html' as dom;

dom.Range range;
dom.DivElement editable;

void main() {
  editable = (dom.document.querySelector('#editable') as dom.DivElement);
  dom.document.onSelectionChange.listen(getRange);
}

void getRange(dom.Event e) {
  if(dom.document.activeElement != editable) {
    return;
  }

  dom.Selection sel = dom.window.getSelection();
  if(sel != null) {
    range = sel.getRangeAt(0);
    print('${range.startOffset} ${range.endOffset}');
  }
}

在 contenteditable div 元素（飞镖）中设置和获取 selectionrange/caret 位置

Setting and getting selectionrange/caret position in contenteditable div element (dart)

caret

selection

contenteditable

dart