Five New Optimizely Certifications are Here! Validate your expertise and advance your career with our latest certification exams. Click here to find out more

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.