caret position in an editable div (dartlang)

Question

I try to find the caret position in an editable div. Also it should be nice to get the selected text in this div.

I try to assimilate this: Editable Div Caret Position

But it dosen’t work.

I'll be happy to give any Idea.

Thanks in advance

Some code snippet

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

Can you please add your code to your question. What is "doesn't work?" — Günter Zöchbauer, Feb 12 '14 at 14:47

score 0 · Accepted Answer · edited May 23 '17 at 11:49

0

This worked for me in Dartium.

The other code from the referenced SO question is probably to support other browsers. Dart usually generates JS code that works in all supported browsers. You have to test yourself if the generated JS really works in the browsers you want to support.

EDIT

We store the selection whenever it changes. Maybe there are better events but I couldn't find one. But it worked fine for me. We insert the new node at the previously stored selection.

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

You have to decide yourself where you put those code parts. I added some comments as support.

EDIT
using the mousedown event instead of click should help around this issue
Preserve text selection in contenteditable while interacting with jQuery UI Dialog and text input

edited May 23 '17 at 11:49

Community

1
1

answered Feb 12 '14 at 15:09

Günter Zöchbauer

623,577
216
2,003
1,567

Yes you’re right. This is working. Just for a Button click. But. I have expressed myself wrong. I got a problem when I click any other element. =>
Hit me
Because the focus is gone. – Frank Feb 12 '14 at 16:05
have you tried to call `e.preventDefault();` and `e.stopPropagation();` inside your `doSomething()` this should cancel the focus loss? – Günter Zöchbauer Feb 12 '14 at 16:07
Can you add your code to your question? Can you explain 'doesn't work' with more details please? – Günter Zöchbauer Feb 12 '14 at 16:35
Hallo Günter. That works. But I hope dartlang have a more elegant method then to observe the whole document. Many Thanks in deep. – Frank Feb 12 '14 at 18:39
Dart can't do only so much if the browser doesn't support a feature. I also read on another question (similar problem with JavaScript) that FireFox doesn't provide that event. Search on SO for similar questions and some other possible workarounds maybe there is something that fits better for your use case. – Günter Zöchbauer Feb 12 '14 at 20:57

caret position in an editable div (dartlang)

1 Answers1

Linked