Keep hyperlink navigation in inline tinyMCE

Question

I have a built-in tinyMCE editor where HTML text can contain hyperlinks. If the user clicks the hyperlink, I want them to go to the URL. If they click elsewhere, I want to enter edit mode.

HTML:

<div id="tinymce">
  <p>User should be able to <a id="mylink" href="http://google.com">navigate to a link</a> and also edit the text by clicking outside the link.</p>
</div>

script:

tinymce.init({
  selector: '#tinymce',
  inline: true
});

$('#mylink').on('click', function(e) {
  // This never fires
  console.log('Link clicked...');
});

jsfiddle: http://jsfiddle.net/rdog33/uLhdq447/

As you can see, I had the idea to connect to the click event of the hyperlink and manually send the user using window.location.href, but this event does not fire. If I uncomment the initialization of tinymce, it fires, so it is obvious that tinymce is somehow interfering.

Any ideas?

Answer 1

- , . :

tinymce.init({
  selector: '#tinymce',
  inline: true,
  setup: function(editor){
    editor.on('init', function() {
      $(editor.getBody()).on('click', 'a[href]', function(e) {
        window.location.href = $(e.currentTarget).attr('href');
      });
   }
});

• ​​ , ""
• ,
• ​​

Answer 2

- tinymce setup , ( init).

tinymce.init({
  selector: '#tinymce',
  inline: true,
  setup: function(editor){
     editor.on('init', function(editor){
       $(editor.getBody()).find('#mylink').on('click', function(e) {
         // This never fires
         console.log('Link clicked...');
       });
     });
  }

});