Creating an external plugin for TinyMCE

Tahir Naveed

Vote:

Guys, I am following this link and the following code

[ModuleDependency(typeof(TinyMceInitialization))]
public class CustomizedTinyMceInitialization : IConfigurableModule
{
    public void Initialize(InitializationEngine context)
    {
    }

    public void Uninitialize(InitializationEngine context)
    {
    }

    public void ConfigureContainer(ServiceConfigurationContext context)
    {
        context.Services.Configure<TinyMceConfiguration>(config =>
        {
            config.Default()
                .AddExternalPlugin("custom-plugin", "alloy/plugins/custom-plugin.js");
        });
    }
}

but I am strugling to understand what should be the structure within solution i.e. where should I put my custom-plugin.js? No matter where I place the custom-plugin.js, i always get 404 in console :(

My structure is as follows

ClientResources
- Scripts
  - plugins
    - custom-plugin.js

Any help will be appreciated.

#216584

Feb 10, 2020 15:48

Vote:

Have you added the mapping to your module.config?

 <dojo>
    <!-- Add a mapping from Mosey to ~/ClientResources/Scripts to the dojo loader configuration -->
    <paths>
      <add name="foundation" path="~/ClientResources/Scripts" />
    </paths>
  </dojo>

#216593

Feb 10, 2020 16:47

Tahir Naveed

Vote:

It is based on visual studio template so this is included already.

#216599

Feb 10, 2020 18:03

Vote:

Hi Tahir,

What is the path for the 404 you are now getting (so where fromit currently tries to load the resource VS the actual location based on your shown structure)?

How does your module.config currently look like?

When you say it is based on the Visual Studio template, I guess you mean you have created the Alloy MVC demo site and you are using that to test out to create a custom plugin for TinyMCE?

You could also look at Lucs sample about custom plugin. And if you think you have made a mistake in the module config you could try to use the full blown path /ClientResources/Scripts/plugins/custom-plugin.js in the AddExternalPlugin method.

#216915

Feb 11, 2020 7:19

Tahir Naveed

Vote:

Module.config looks like this

<?xml version="1.0" encoding="utf-8"?>
<module>
    <assemblies>
	    <!-- This adds the Alloy template assembly to the "default module" -->
        <add assembly="EpiserverSite12" />
    </assemblies>
    <clientResources>
        <add name="epi-cms.widgets.base" path="Styles/Styles.css" resourceType="Style"/>
    </clientResources>
    <dojo>
        <!-- Add a mapping from alloy to ~/ClientResources/Scripts to the dojo loader configuration -->
        <paths>
            <add name="alloy" path="Scripts" />
        </paths>
    </dojo>
</module>

Initialisable module code is like this

                config.Default()
                    .AddExternalPlugin("custom-plugin1", "alloy/plugins/custom-pluginA.js");

                config.Default()
                    .AddExternalPlugin("custom-plugin2", "ClientResources/Scripts/plugins/custom-pluginB.js");

                config.Default()
                    .AddExternalPlugin("custom-plugin3", "plugins/custom-plugin.js");

Console errors are like this

GET http://localhost:62539/EPiServer/EPiServer.Cms.TinyMce/2.8.0/ClientResources/tinymce/alloy/plugins/custom-pluginA.js net::ERR_ABORTED 404 (Not Found)
GET http://localhost:62539/EPiServer/EPiServer.Cms.TinyMce/2.8.0/ClientResources/tinymce/ClientResources/Scripts/plugins/custom-pluginB.js net::ERR_ABORTED 404 (Not Found)
GET http://localhost:62539/EPiServer/EPiServer.Cms.TinyMce/2.8.0/ClientResources/tinymce/plugins/custom-plugin.js net::ERR_ABORTED 404 (Not Found)

My structure is as follows

ClientResources
- Scripts
  - plugins
    - custom-plugin.js
    - custom-pluginA.js
    - custom-pluginB.js

#216934

Feb 11, 2020 9:58

Vote:

So simple fix would be to change your paths to absoloute in the calls to AddExternalPlugin, '/ClientResources/Scripts/plugins/[the-name-of-your-js-files-here]'.

#216935

Feb 11, 2020 10:09

Tahir Naveed

Vote:

But even that didn't work. See 2nd part (ClientResources/Scripts/plugins/custom-pluginB.js) :( I am pretty sure, it is something very simple but dont know what it is

#216937

Feb 11, 2020 10:25

Vote:

Hi Tahir, actually your second one is missing the leading '/' character so it is not absolute but relative path (and relative to TinyMCE as you can see from the not found requests).

#216938

Edited, Feb 11, 2020 10:39

Tahir Naveed

Vote:

Thanks @Antti. Managed to get it working...

#216961

Feb 11, 2020 16:05

Try our conversational search powered by Generative AI!

Creating an external plugin for TinyMCE