从TinyMCE 4迁移至TinyMCE 5时插件报错：btn.active不是函数的替代方案求助

这个报错是因为TinyMCE 5对UI按钮的激活状态API做了变更——TinyMCE 4里的btn.active()方法在TinyMCE 5中被替换成了btn.setActive()方法，你只需要修改这一处就能解决问题。

具体修改步骤： #

在你的updateOnSelect函数里，把：

btn.active(isTelLink);

替换成：

btn.setActive(isTelLink);

另外补充一下，如果你需要获取按钮当前的激活状态，TinyMCE 5对应的方法是btn.getActive()，替代了原来TinyMCE 4中btn.active()不带参数的调用方式。

修改后的完整插件代码： #

tinymce.PluginManager.add('phonelink', function(editor, url) { 
  // Add a button that opens a window 
  var linkText = ""; 
  var linkTitle = ""; 
  var link = ""; 

  // tinymce.DOM.loadCSS(url + '/css/phonelink.css'); 
  editor.ui.registry.addButton('phonelink2', { 
    text: 'asddas', 
    icon: 'image-options', 
    onSetup: updateOnSelect, 
    onAction: onClickPhoneButton 
  }); 

  // Adds a menu item to the tools menu 
  editor.ui.registry.addMenuItem('phonelink', { 
    text: 'asddas', 
    icon: 'image-options', 
    context: 'tools', 
    onAction: onClickPhoneButton, 
    onSetup: updateOnSelect 
  }); 

  function onClickPhoneButton(){ 
    editor.windowManager.open({ 
      title: '123213123', 
      body: { 
        type: 'panel', 
        items: [ 
          {type: 'input', name: 'phone', label: 'Teléfono', value: link}, 
          {type: 'input', name: 'showtext', label: 'Texto a mostrar', value: linkText}, 
          {type: 'input', name: 'title', label: 'Título', value: linkTitle} 
        ] 
      }, 
      buttons: [ 
        { text: 'Close', type: 'cancel', onclick: 'close' }, 
        { type: 'submit', name: 'submitButton', text: 'Stwórz', primary: true } 
      ], 
      onAction: function(e) { 
        alert('Toggle menu item clicked'); 
      }, 
      onSubmit: function(e) { 
        var data = e.getData(); 
        var hrefLink = '<a title="' + data.title + '" href="tel:+34' + data.phone + '">' + data.showtext + '</a>'; 
        if(link !== ''){ 
          editor.setContent(hrefLink); 
        }else{ 
          editor.insertContent(hrefLink); 
        } 
        e.close(); 
      } 
    }); 
  } 

  function updateOnSelect() { 
    var btn = this; 
    const editorEventCallback = function (e) { 
      var node = editor.selection.getNode(); 
      var isTelLink = node.href !== undefined && node.href.indexOf('tel:+') !== -1; 
      // 核心修改处
      btn.setActive(isTelLink); 
      if(isTelLink){ 
        link = node.href; 
        link = link.replace("tel:+34", ""); 
        linkTitle = node.title; 
        linkText = node.text; 
      } 
    }; 
    editor.on('NodeChange', editorEventCallback); 
    return function (btn) { 
      editor.off('NodeChange', editorEventCallback); 
    } 
  } 
});

这个修改应该能直接解决你的控制台报错，让插件正常工作。TinyMCE 5在UI组件API上做了不少这类细节调整，迁移的时候要多留意状态控制相关的方法变更~

内容的提问来源于stack exchange，提问作者tarzinio