Try our conversational search powered by Generative AI!

How to extend or add controls like font color in tiny mce?

Vote:
 

I have very limited number of controls in tinymce. How to extend or add controls like font color in tiny mce? tinymce version is 4.8.5.

#204276
May 24, 2019 4:13
Vote:
 

Hi,

For TinyMCE 4 it would be Episerver's TinyMCE 2 plugin so you need to configure custom styles in an IConfigurableModule like this:

[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.For<StandardPage>(t => t.MainBody)
                .Toolbar("styleselect")
                .StyleFormats(
                    new { title = "More button", inline = "span", styles = new { background = "#f00" }, classes = "more-button" }
                );
        });
    }
}

You can find more info here:

https://world.episerver.com/documentation/developer-guides/CMS/add-ons/customizing-the-tinymce-editor-v2/custom-style-formats/ 

#204282
May 24, 2019 9:33
Vote:
 

Hi,

You have to extend the TinyMCE plugin and to extend the plugin for whole solution you need to extend the "IConfigurableModule" module.

[InitializableModule]
    [ModuleDependency(typeof(TinyMceInitialization))]
    public class TinymceCustomInitialization : IConfigurableModule
    {
        public void ConfigureContainer(ServiceConfigurationContext context)
        {
            // browser console to see settings: window.tinymce.settings;

            context.Services.Configure<TinyMceConfiguration>(config =>
            {
                config.Default()
                    .AddPlugin("code", "anchor", "media")
                    .Toolbar("formatselect | epi-personalized-content epi-link anchor numlist bullist indent outdent bold italic underline alignleft aligncenter alignright | subscript superscript | undo redo | image epi-image-editor media | cut copy pastetext paste removeformat | code | fullscreen")
                    .AddSetting("valid_children", "+body[style]").AddSetting("extended_valid_elements", "script[language|type|src]");
            });
        }

        public void Initialize(InitializationEngine context) { }

        public void Uninitialize(InitializationEngine context) { }
    }

@Paul solution is good if you want to extend the TinyMCE for particular field of a page or a block.

Thanks

Ravindra

#204570
Jun 10, 2019 10:01
* 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.