Creating an external plugin for TinyMCE

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
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
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
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:40
Vote:
 

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

#216961
Feb 11, 2020 16:05
This topic was created over six months ago and has been resolved. If you have a similar question, please create a new topic and refer to this one.
* You are NOT allowed to include any hyperlinks in the post because your account hasn't associated to your company. User profile should be updated.