ckeditor: custom a tag is doubled

Question

I am using ckeditor with some extras to render a button. This is part of my ckeditor config in the plugins settings

link: {
      // Automatically add target="_blank" and rel="noopener noreferrer" to all external links.
      addTargetToExternalLinks: true,
      decorators: [
        {
          mode: 'manual',
          label: 'Render as Button',
          classes: ['alo-button-red', 'alo-base-button'],
          attributes: {
            role: 'button',
          }
        },
        {
          mode: 'manual',
          label: 'Render as Inverted Button',
          classes: ['alo-button-white', 'alo-base-button'],
          attributes: {
            role: 'button',
          }
        }
      ]
    }

This works as wanted, but the editor itself shows, after saving once, some wrong markup. Here is the link after creation with decorator "render as button".

Then after saving the preview looks like this:

So you can see it has blue text, because the editor added a link inside my link. When showing the source I get:

Resulting in two nested a tags. Luckily in my frontend I still get only one a tag.

But when I edit some things in my wysiwyg editor it happens that those a tags get messed up resulting in a break of all the button code.

Does anybody know why this is happening?

Answer 1

You can define entry types that are available from within CKEditor, per the docs: https://github.com/craftcms/ckeditor?tab=readme-ov-file#longform-content-with-nested-entries

In your case, you could create a 'button' entry type with fields including the link, the link text, and the 'button' style. For the button style, I'd probably use a dropdown field to allow user only specific types, outputing the classes for those directly to your template, e.g:

option.label: 'Primary button' option.value: 'alo-base-button alo-button-red'

I think that would provide a more robust solution, that's easily extended and potentially re-used in other components.