Question

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

但它不起作用。

我很乐意提出任何想法。

提前致谢

一些代码段

HTML

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

Dart

  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); } }

您必须自己决定放置这些代码部分的位置。我添加了一些评论作为支持。

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

可编辑div中的插入位置（dartlang）

1 个答案: