javascript - 在内联 tinyMCE 中保留超链接导航

Question

我有一个内联的 tinyMCE 编辑器，其中 HTML 文本可能包含超链接。如果用户单击超链接，我希望他们转到该 URL。如果他们点击别处，我想进入编辑模式。

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>

脚本:

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

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

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

如您所见，我想 Hook 到超链接的单击事件并使用 window.location.href 手动将用户发送出去，但该事件没有触发。如果我取消对 tinymce 初始化的注释，它会触发，所以显然 tinymce 正在以某种方式进行干扰。

有什么想法吗？

Answer 1

Thariama 的回答几乎是正确的 - 感谢您让我走上正轨。下面是我的最终代码:

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

• 修复了“editor”作为参数使用了两次的语法错误
• 更改了事件处理以适用于所有超链接，即使内容被用户替换也是如此
• 为超链接添加导航