TinyMCE Custom classes on link

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

AI OnAI Off

Home / Forums / Developers (Main Products) Forum / CMS 7.5 - 11 /

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

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.