TinyMCE: Loading an external plugin into a CLI based Angular web app

You can find the complete repro project here: https://github.com/Myrmex/tinymce-plugin-repro .

Solution found: see below.

I am developing an Angular4 web app using TinyMCE with a very simple custom plugin. This plugin with the name format-display

aims to show the color of the text under the cursor mapped to some base value (e.g. red means something, green means something else, etc.). The plugin simply reads the color under the cursor and displays it with its display, if any. It works great in build environment (built in Typescript with Yeoman generator from https://www.tinymce.com/docs/advanced/yeoman-generator/ ): my problem is that it is not loaded when used in my Angular app.

This is a custom plugin (not packaged in a TinyMCE package), I have to add it to the editor using external_plugins

, not plugins

when initializing it, and copy the dist ( dist/format-display

) folder to assets/plugins

(or anywhere else, always under assets

). For any non-NPM third party library, I then add the plugin source code to the angular-cli.json

pod scripts

.

The TinyMCE plugin manager seems to have registered my external plugin correctly, as I can see it in tinymce.pluginmanager

while debugging and the registration code is called without error. However, the editor doesn't seem to load my registered plugin: no part of its code is ever called.

Checking my sources while debugging. I could find two instances of my plugin.js:

• WebPack: ///./src/assets/plugins/format-display/plugin.js
• local: 4200 / assets / plugins / format-display / plugin.js

I assume the former comes from including the plugin code in the angular-cli.json

pod scripts

, and the latter comes from a property external_plugins

when the editor is initialized. However, if I remove the link from angular-cli nothing changes and the plugin still fails to load.

Supplement . I must add that this duplication does not seem to have any side effects. I tried changing my generated plugin.js code to var plugin_1 = __webpack_require__(0); if (!tinymce.PluginManager.lookup.formatDisplay) { tinymce.PluginManager.add('formatDisplay', plugin_1["default"]); }

but the problem persists even though now when I check tinymce.PluginManager.lookup

I see the expected 2 instances: one for fullscreen

, the other (no more than 2 instances)) for formatDisplay

.

I've followed these directions for TinyMCE with Angular, but they don't cover the external plugin case, and I'm a TinyMCE newbie:

• https://www.tinymce.com/docs/integrations/angular2/
• https://www.ephox.com/blog/angular-2-and-tinymce/?_ga=1.117951882.2068174515.1491150296

Decision

I found out how to make it work. The reproduction project has been updated accordingly. To summarize: despite the official documentation (as far as I can tell), I should NOT load via external_plugins

, but let Webpack load and just list the desired plugin in a property plugins

. Also, there I have to use the camel-cased identifier in this way formatDisplay

, not format-display

like:

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