How to make links inside jQuery Text Editor clickable?

948 Views Asked by At

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');
1

There are 1 best solutions below

0
On BEST ANSWER

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.