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

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

jsfiddle：

正如您所看到的，我有一个想法，可以挂接到超链接的单击事件中，并使用window.location.href手动发送用户，但该事件没有触发。如果我取消tinymce初始化的注释，它确实会触发，因此显然tinymce在某种程度上进行了干扰

---

有什么想法吗？

这里正确的方法是使用tinymce参数

setup

，并在编辑器准备就绪时向link元素添加一个click处理程序（使用

init

事件）

---

塔里亚马的回答几乎是正确的——谢谢你让我走上正轨。以下是我的最终代码：

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

• 修复了两次使用“编辑器”作为参数时出现的语法错误
• 更改事件处理以处理所有超链接，即使内容由用户替换
• 添加了超链接的导航

---

感谢您让其他用户知道您做了什么-另外一点请记住，如果您这样做，ctrl-click/command-click将不再在新选项卡中打开它们。

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

});

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