在内联 tinyMCE 中保留超链接导航答案

【问题标题】：Preserve hyperlink navigation in inline tinyMCE在内联 tinyMCE 中保留超链接导航
【发布时间】：2015-12-08 22:24:31
【问题描述】：

我有一个内嵌 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/

如您所见，我有一个想法，即挂钩到超链接的单击事件，并使用 window.location.href 手动将用户发送出去，但该事件不会触发。如果我取消注释 tinymce 初始化，它确实会触发，因此很明显 tinymce 会以某种方式干扰。

有什么想法吗？

【问题讨论】：

标签： javascript tinymce tinymce-4

【解决方案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”用作参数两次的语法错误
更改了事件处理以适用于所有超链接，即使内容被用户替换
为超链接添加了导航

【讨论】：

感谢您让其他用户知道您的所作所为 - 加一个
请记住，如果您这样做，ctrl-click/command-click 将不再在新选项卡中打开它们。

【解决方案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...');
       });
     });
  }

});

【讨论】：