1

I'm trying to swith from using a textarea element for my editor to a <div contenteditable="true"></div> element. I have only one problem that is that I can't use textarea.selectionStart, textarea.selectionEnd, textarea.setSelectionRange() anymore. Are there any method to get and set the selection range for a div element in dart ? Or a way to get the caret position ?

90intuition
  • 966
  • 3
  • 12
  • 25

1 Answers1

1
import 'dart:html' as dom;

dom.Range range;
dom.DivElement editable;

void main() {
  editable = (dom.document.querySelector('#editable') as dom.DivElement);
  dom.document.onSelectionChange.listen(getRange);
}

void getRange(dom.Event e) {
  if(dom.document.activeElement != editable) {
    return;
  }

  dom.Selection sel = dom.window.getSelection();
  if(sel != null) {
    range = sel.getRangeAt(0);
    print('${range.startOffset} ${range.endOffset}');
  }
}
Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
  • I don't understand what is going on with all this dom.document kind of stuff, can I read somewhere about that, I've never seen it before. But I can get it to work if I remove the `dom.` it and put the code in my main function. – 90intuition Feb 12 '15 at 13:02
  • I import the `dart:html` library with the prefix `dom` you can use none or any other valid identifier you like. `document` is just the browser page containing all elements. The `onSelectionChange` event is a global event therefore I register my event handler there. – Günter Zöchbauer Feb 12 '15 at 13:04
  • Okay, thanks I understand. This may be better for another question, but I was wondering if it would be possible in dart to extend the div element class so that I can call div.setSelectionRange() or div.selectionStart ? I tried to do some class DivPro extends DivElement kind of things, but it doesn't seem to work. – 90intuition Feb 12 '15 at 13:12
  • Could I also do something like that without giving the element a new tag-name ? I don't feel like it is needed to give the div a new name on the html side, I just want to have a shortcut when I'm writing code on the dart side. – 90intuition Feb 12 '15 at 13:24
  • I didn't extend an element without Polymer in my own projects just tried it for curiosity a while ago, but if you extend a DOM element you have to use `
    ...
    ` anyway, only for real custom elements you can do `` as far as I remember (it is this way for Polymer and I'm pretty sure this is also for the way shown in the linked question).     – Günter Zöchbauer Feb 12 '15 at 13:26
  • I guess it is not possible, but just to be sure, I mean, without even having to say `
    `. But too just only extend the DivElement class on the dart side, and that I could use my extended class with this extra method for any div element. So I mean that I can choose to do either `DivElement div = querySeletor('div);` or `DivExtraElement div = querySeletor('div);` on any normal html div element.
     – 90intuition Feb 12 '15 at 13:39
  • No, this way it won't work. The element is created by the browser and the constructor of the class is called from the browser when it creates the element so the browser has to know it is a custom element. Therefore you have to register the element to the browser and use the tag associated with the registered element. – Günter Zöchbauer Feb 12 '15 at 13:42