How to make links inside jQuery Text Editor clickable?

968 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
Nawaf Alsulami 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.