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 イベントを使用したEDITは、この問題を回避するのに役立ち
ます

于 2014-02-12T15:09:44.580 に答える