Style links in rich text to look like buttons

I wanted to quickly try the solution and respond, but I ended up going down a rabbit hole.

The Froala editor used by XbyK is customizable, and its Link plugin includes the linkStyles option, exactly what you asked about. Since the documentation mentions that XbyK bundles most of Froala’s plugins, I thought it would just be a matter of adding linkStyles to the editor config. Unfortunately, that didn’t work.

After doing some more research, I found that the Link plugin is most likely not bundled with XbyK, as the link button doesn’t appear even when I include insertLink in the toolbarButtons config option. My assumption is that since XbyK implements a custom plugin, @kentico/xperience-admin-base/Link, for inserting links from within the system, the default Froala Link plugin might have been excluded, either because it’s redundant or due to potential conflicts between the two.

Anyway, I also tried adding the linkStyles option in the @kentico/xperience-admin-base/Link plugin config, but that didn’t work either. I assume it doesn’t implement such an option.

I’d recommend reaching out to the support or consulting team to shed more light on this, and suggesting an improvement to the documentation to list which plugins are excluded and why.

Hey there,

Milan was on the right track. The default Xperience Link plugin is customizable, and custom styling for links is definitely possible. However, you need to include not just the linkStyles option, but also the linkEditButtons option with the linkStyle included in your inline editor's configuration (the default configuration omits linkStyle).

To just simply extend the example from the documentation:

(function (pageBuilder) {
    var richTextEditor = pageBuilder.richTextEditor = pageBuilder.richTextEditor || {};
    var configurations = richTextEditor.configurations = richTextEditor.configurations || {};
    // Overrides the "default" configuration of the Rich text widget, assuming you have not specified a different configuration
    // The below configuration adds the h5 and h6 values to the paragraphFormat and removes the code value. Also sets the toolbar to be visible without selecting any text.
    configurations["default"] = {
        toolbarVisibleWithoutSelection: true,
        paragraphFormat: {
            N: "Normal",
            H1: "Headline 1",
            H2: "Headline 2",
            H3: "Headline 3",
            H4: "Headline 4",
            H5: "Headline 5",
            H6: "Headline 6",
        },
        "linkStyles": {
            "class1": "CTA - orange",
            "class2": "Text - orange"
        },
        "linkEditButtons": ["linkOpen", "linkStyle", "linkEdit", "linkRemove"]
    }
})(window.kentico.pageBuilder);

If you want to see the styles applied also when working in the editor (and not just on the live site), don't forget to add the desired custom CSS to the rich text editor.