TinyMCE Custom classes on link

Henk van den Bosch

Vote:

I am trieing to add custom classes on a link.
What i have so far is:

[ModuleDependency(typeof(TinyMceInitialization))]
    public class CustomizedTinyMceInitialization : IConfigurableModule
    {
        public void ConfigureContainer(ServiceConfigurationContext context)
        {

            context.Services.Configure<TinyMceConfiguration>(config =>
            {
                config.Default()
                    .ContentCss("/Static/css/rte-custom.css")
                    .Toolbar("styleselect | formatselect | bold italic underline | epi-link anchor | image epi-image-editor epi-personalized-content | bullist numlist outdent indent | epi-dnd-processor | removeformat | fullscreen")
                    .StyleFormats(
                        new { title = "Deep Blue", inline = "a", classes = "btn btn-deep-blue" },
                        new { title = "Fresh Blue", inline = "a", classes = "btn btn-secondary" },
                        new { title = "Warm Coral", inline = "a", classes = "btn btn-primary" })
                    .BlockFormats("Paragraph=p;Heading 2=h2;Heading 3=h3;Heading 4=h4;Heading 5=h5;Heading 6=h6;");
            });
        }

        public void Initialize(InitializationEngine context) { }

        public void Uninitialize(InitializationEngine context) { }
    }

Now i can place the links with the custom classes but i can not set/edit the url of the link.

I am using TinyMCE version 4.9.11 and Optimizely version 11.20.4

#267781

Edited, Dec 03, 2021 13:18

Jake Jones

Vote:

Hi Henk,

I think this is just because you're missing AddPlugin for epi-link, it should look something like:

config.Default()
    .AddPlugin("epi-link")

If you switch your style formats to selector (opposed to inline) then they'd only be applicable to links, like so:

new { title = "Deep Blue", selector = "a", classes = "btn btn-deep-blue" }

Depends what functionality you're going for.

#267968

Dec 07, 2021 8:47

Try our conversational search powered by Generative AI!

TinyMCE Custom classes on link