tinymce v5 中的 onNodeChange？答案

【问题标题】：onNodeChange in tinymce v5?tinymce v5 中的 onNodeChange？
【发布时间】：2020-11-05 08:38:55
【问题描述】：

我在 tinymce (https://moodle.org/plugins/tinymce_glatex) 中添加了一个外部插件

我像这样在 tinymce.init 中添加它

plugins: ['glatex'],
toolbar: ' glatex',
external_plugins: {
  'glatex': '/images/glatex/tinymce/editor_plugin.js'
},

但是控制台有错误

Failed to initialize plugin: glatex TypeError: Cannot read property 'add' of undefined
    at t.<computed>.t.<computed>.init (editor_plugin.js:48)
    at cN (tinymce.min.js:2)
    at Array.<anonymous> (tinymce.min.js:2)
    at Object.ge [as each] (tinymce.min.js:2)
    at pN (tinymce.min.js:2)
    at EE.<anonymous> (tinymce.min.js:2)
    at Array.<anonymous> (tinymce.min.js:2)
    at ge (tinymce.min.js:2)
    at u (tinymce.min.js:2)
    at tinymce.min.js:2
    
theme.min.js:2 Uncaught Error: Errors: 
Failed path: (toolbarbutton)
Could not find valid *strict* value for "onAction" in {
  "title": "LaTeX Plugin",
  "cmd": "LatexPlugin",
  "image": "/images/glatex/tinymce/img/latex.png",
  "type": "button"
}

Input object: {
  "title": "LaTeX Plugin",
  "cmd": "LatexPlugin",
  "image": "/images/glatex/tinymce/img/latex.png",
  "type": "button"
}
    at theme.min.js:2
    at Object.getOrDie (theme.min.js:2)
    at theme.min.js:2
    at theme.min.js:2
    at Object.fold (theme.min.js:2)
    at theme.min.js:2
    at Object.fold (theme.min.js:2)
    at qE (theme.min.js:2)
    at theme.min.js:2
    at V (theme.min.js:2)

这是 glatex 中 editor_plugin.js 的代码

(function () {

        tinymce.create('tinymce.plugins.LatexPlugin', {

          
    init: function (ed, url) {
      ed.addCommand('LatexPlugin', function () {
          ed.windowManager.open({
              file: ed.getParam("moodle_plugin_base") + 'glatex/glatex.php',
              width: 640 + parseInt(ed.getLang('latex.delta_width', 0)),
              height: 480 + parseInt(ed.getLang('latex.delta_height', 0)),
              inline: 1
          }, {
              plugin_url: url
          });
      });

      // Register button
      ed.ui.registry.addButton('glatex', {
          title: 'LaTeX Plugin',
          cmd: 'LatexPlugin',
          image: url + '/img/latex.png'
      });

      // Node change events
      ed.onNodeChange.add(function (ed, cm, n) {
          cm.setActive('glatex', n.nodeName == 'IMG');
      });

    },

    getInfo: function () {
        return {
            longname: 'Latex plugin',
            author: 'Diego Caponera',
            authorurl: 'http://www.diegocaponera.com',
            infourl: 'http://www.diegocaponera.com',
            version: "1.0"
        };
    }
    });

// Register plugin
       tinymce.PluginManager.add('glatex', tinymce.plugins.LatexPlugin)
})();

有人理解这个错误吗？我一直在搜索它，但没有找到解决方案

【问题讨论】：

标签： javascript vue.js tinymce tinymce-plugins

【解决方案1】：

您引用的插件似乎是在 TinyMCE 5 发布之前编写的，因此它可能使用 TinyMCE 4 的 API。

为了使插件与 TinyMCE 5 一起使用，需要对其进行更新以与 TinyMCE 5 的 API 一起使用。

这里有关于从 TinyMCE 4 迁移到 5 的文档：https://www.tiny.cloud/docs/migration-from-4x

【讨论】：