可编辑 div 中的插入符号位置 (dartlang)

Question

我尝试在可编辑的 div 中找到插入符号的位置。 在这个 div 中获取选定的文本也应该很好。

我尝试理解这一点： Editable Div Caret Position

但它不起作用。

我很乐意提供任何想法。

提前致谢

一些代码sn-p

HTML

<a on-click="{{chooseMenu}}" which-menu="1">Menu 1</a>

飞镖

  void chooseMenu(Event event, var detail, var target) {

    event.preventDefault();
    event.stopPropagation();

    Selection sel;
    Range range;

    sel = window.getSelection();

    if(sel != null) {
      range = sel.getRangeAt(0);
      range.collapse(false);
    }

    currentSubMenu = int.parse(target.attributes['which-menu']);
  }

Answer 1

这在 Dartium 中对我有用。

引用的 SO 问题中的其他代码可能是为了支持其他浏览器。 Dart 通常会生成适用于所有支持的浏览器的 JS 代码。 生成的 JS 是否真的能在你想要支持的浏览器中运行，你必须自己测试一下。

编辑

我们在改变时存储选择。也许有更好的活动，但我找不到。 但这对我来说效果很好。 我们在先前存储的选择中插入新节点。

// must be accessible by getRange, insertNodeAfterSelection 
DivElement editable;
Range range;

// store reference to our contenteditable element
editable = (document.querySelector('#editable') as DivElement);

// subscribe selection change events
document.onSelectionChange.listen(getRange);


void insertNodeAfterSelection(Node node) {
  range.collapse(false);
  range.insertNode(node);
}

void getRange(Event e) {
  if(document.activeElement != editable) { // save only selection changes on our contenteditable
    return;
  }
  print(e);
  Selection sel;

  sel = window.getSelection();
  if(sel != null) {
    range = sel.getRangeAt(0);
  }
}

您必须自己决定将这些代码部分放在哪里。我添加了一些 cmets 作为支持。

编辑
使用 mousedown 事件而不是单击应该有助于解决此问题
Preserve text selection in contenteditable while interacting with jQuery UI Dialog and text input