Question

请在此处找到完整的repro项目：https://github.com/Myrmex/tinymce-plugin-repro。

找到解决方案：请参见底部。

我正在使用TinyMCE开发一个Angular4 Web应用程序，并使用一个非常简单的自定义插件。这个名为format-display的插件的目的是显示光标下文本的颜色，映射到一些基本含义（例如，红色表示某些内容，绿色表示其他内容等）。该插件只是读取光标下的颜色，并显示它的映射（如果有的话）。它在构建环境中工作正常（使用https://www.tinymce.com/docs/advanced/yeoman-generator/中的Yeoman生成器在Typescript中内置）：我的问题是在我的Angular应用程序中使用它时没有加载它。

这是一个自定义插件（未包装在TinyMCE包中），我必须在初始化时使用external_plugins而不是plugins将其添加到编辑器中，并复制dist文件夹（{{1 } {}在dist/format-display下（或其他地方，总是在assets/plugins下）。对于任何第三方非NPM类库，我然后在assets下的angular-cli.json添加插件源代码。

TinyMCE插件管理器似乎正确注册我的外部插件，因为我可以在调试期间在scripts中看到它，并且调用注册代码时没有错误。然而，编辑器似乎没有加载我的注册插件：其代码的任何部分都没有被调用。

在调试期间检查我的源代码我可以找到我的plugin.js的两个实例：

的WebPack：///./src/assets/plugins/format-display/plugin.js
本地主机：4200 /资产/插件/格式显示/ plugin.js

我假设第一个来自于tinymce.pluginmanager下的angular-cli.json中的插件代码，以及初始化编辑器时来自scripts属性的第二个插件代码。然而，如果我从angular-cli中删除引用似乎没有任何改变，并且插件仍然没有被加载。

添加：我必须补充一点，这种重复似乎没有副作用。我尝试将生成的plugin.js代码更改为external_plugins，但问题仍然存在，即使现在我检查var plugin_1 = __webpack_require__(0); if (!tinymce.PluginManager.lookup.formatDisplay) { tinymce.PluginManager.add('formatDisplay', plugin_1["default"]); }时我可以看到预期的2个实例：一个用于tinymce.PluginManager.lookup，另一个用于fullscreen formatDisplay一个（不多于2个实例）。

我遵循了Angular对TinyMCE的这些指示，但它们不包括外部插件的情况，而且我是TinyMCE的新人：

解决方案

我发现了如何让它发挥作用。 repro项目已相应更新。总结一下：尽管有官方文档（据我所知），我不能通过external_plugins加载，但是让Webpack加载并在plugins属性中列出所需的插件。此外，我必须使用驼峰标识符，因此formatDisplay而不是format-display，如：

  tinymce.init({
  ...
  plugins: ['fullscreen', 'formatDisplay'],

TinyMCE：将外部插件加载到基于Angular CLI的Web应用程序中

0 个答案: