How to make links inside jQuery Text Editor clickable?

Question

While dynamically adding bootstrap popovers to my jquery editor, I found that any links inside the editor are rendered unclickable. I am placing hyperlinks inside my popovers' content and those links are rendered unclickable too. Any idea how override this effect in the editor to make them clickable. Thank you.

Html

<textarea class="textarea"></textarea>

Dart

  context.callMethod(r'$', ['.textarea']).callMethod('jqte');
  querySelector('.jqte_editor').children.add(new AnchorElement(href: 'dartlang.org')..text = 'link');

Links cannot clickable inside ; it's plaintext. http://stackoverflow.com/questions/8798394/turn-each-line-of-textarea-into-a-link — brandonscript, Dec 18 '13 at 21:56
I changed it to a div but it didn't help. But, I found the attribute that renders links unclickable inside jqte: `contenteditable="true"`. Changing this to false renders links clickable but defeats the purpose of the editor of modifying text. :( — Nawaf Alsulami, Dec 18 '13 at 22:38
I think a possible solution for this is to add an onHover attribute to the link that disables contenteditable. :) — Nawaf Alsulami, Dec 18 '13 at 22:40
Indeed. That solved it for me. I added an onMouseOver listener and disabled .jqte_editor's contentediable attribute. :) @r3mus thank you for your response. — Nawaf Alsulami, Dec 18 '13 at 22:48

score 0 · Accepted Answer · answered Dec 18 '13 at 22:53

Perhaps there is another solution for this but here is one. The links are not clickable inside jqte because jqte sets its contenteditable attribute to true.

  querySelector('.jqte_editor').children.add(new AnchorElement(href: 'dartlang.org')
  ..text = 'link'
  ..onMouseOver.listen((e){
    querySelector('.jqte_editor').setAttribute('contenteditable', 'false');
  })
  );

Basically, I've added an onMouseOver listener to the anchor element that changed the contentediable attribute of jqte editor to false.

How to make links inside jQuery Text Editor clickable?

1 Answers1