dojo component in tinymce plugin

Luc Gosso (MVP)

Vote:

Trying to use the LegacyDialogPopup in tinyMCE but i dont get how Episerver is doing it.

Looking at epi-image-editor.js Epi is doing it like this:

define("epi-addon-tinymce/plugins/epi-image-editor/epi-image-editor", [
    "epi/routes",
    "epi-addon-tinymce/tinymce-loader",
    "epi-cms/legacy/LegacyDialogPopup",
    "epi/i18n!epi/cms/nls/episerver.cms.tinymce.plugins.epiimageeditor"
], function (routes, tinymce, LegacyDialogPopup, pluginResources) {

    tinymce.PluginManager.add("epi-image-editor", function (editor) {

....
}
});

But when i register my plugin

.AddExternalPlugin("MyPlug", "/pathtoplug.js")

and use the same pattern as upper code:


define("myintegration/plugin/myplug-tinymce", [
    "epi-addon-tinymce/tinymce-loader",
    "epi-cms/legacy/LegacyDialogPopup"
], function ( tinymce, LegacyDialogPopup) {

//this code never runs
tinymce.PluginManager.add('myplug', function (editor, url) { ... });
});

How do they register their addons to run in the dojo context?

#209183

Nov 10, 2019 14:11

Ben McKernan

Vote:

The epi plugins are not loaded the same way as external plugins. Basically, the plugins are built into the package and so they are being loaded via AMD when the TinyMCE editor is loaded. Since your external plugin is not loaded via AMD but rather as a normal script you should not wrap it in a define call. Instead do a require call inside your plugin function if you need to get things from the edit UI at runtime. So something like:

tinymce.PluginManager.add("epi-image-editor", function (editor) {

    editor.addCommand("mceEPiImageEditor", function () {

        require(["epi-cms/legacy/LegacyDialogPopup"], function (LegacyDialogPopup) {
            var dialog = new LegacyDialogPopup();
            dialog.show();
            editor.fire("OpenWindow", {
                win: null
            });
        });
    });
});

Disclaimer: I have not tested this code snippet :)

#209190

Edited, Nov 11, 2019 9:50