保留内联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/

正如您所看到的,我有一个想法可以挂钩超链接的click事件,并使用window.location.href手动发送用户,但事件不会触发.如果我取消注释初始化,它会触发,所以很明显,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'被用作参数两次
• 更改了事件处理以处理所有超链接,即使内容被用户替换
• 添加了超链接的导航