0

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

我尝试吸收这一点： Editable Div Caret Position

但它不起作用。

我很乐意提供任何想法。

提前致谢

一些代码片段

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']);
  }
4

1 回答 1

0

这在 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 事件而不是单击进行编辑应该有助于解决此问题
在与 jQuery UI 对话框和文本输入交互时保留 contenteditable 中的文本选择

于 2014-02-12T15:09:44.580 回答