Custom Link Styles creating multiple links after editing displayed text

[steve-p96]

Description

I’m experiencing strange behavior when using links in CKEditor with custom styles, as shown in the video below:

CKEditor.bug.mp4

As you can see, it generates multiple tags. I can fix it by reapplying the style, but that shouldn’t be the normal way to edit links—it’s very confusing for editors.

Here are the configs:

ckeditor_custom_styles.txt
ckeditor_config.txt

Steps to reproduce

1. Insert a link (via paste or the link button)
2. Apply a custom style
3. Change the displayed text

Additional info

• Craft version: 5.8.15
• PHP version: 8.3
• CKEditor: 4.10.1

[linear]

PT-2899 Custom Link Styles creating multiple links after editing displayed text

[i-just]

Hi, thanks for getting in touch!

I think that behaviour is coming from the CKEditor itself. I can think of 2 ways around it:

1. change the style definition from element: a to element: span - this allows you to edit the link text as expected; however, it also means you have to select the text you want it to be applied to, and it would be possible to apply it to items other than links, so it might not be ideal
2. use manual decorators instead of style definitions - the downside is that you don’t have a visual representation of how it’ll look before applying that decorator, and multiple decorators can be used at the same time. For example, using the following config will allow you to apply the same primary link styling:

"link": {
	"decorators": {
	  "linkPrimary": {
	    "attributes": {
	      "class": "link link--primary a-btn"
	    },
	    "label": "Link Primary",
	    "mode": "manual"
	  },
	  "openInNewTab": {
	    "attributes": {
	      "rel": "noopener noreferrer",
	      "target": "_blank"
	    },
	    "label": "Open in new tab",
	    "mode": "manual"
	  }
	}
}

We'll discuss this further internally.

[steve-p96]

Thank you!
Are there any updates on this topic? The current workarounds don’t seem to be an ideal long-term solution. 🤔

[i-just]

Hi, we had a chat about this, and I tested your setup against v5 of our CKEditor plugin, and it’s working better there. v5 is still in development, but should be released before the end of the year. One of the changes in v5 is an improved links UX and addition of “Advanced Link Fields” (details can be found here). Those changes mean that if you were to select a “Class Name” under “Advanced Link Fields” in your CKEditor field’s setting and then use the config you provided in your initial message, the styled, edited link shouldn’t get split.

The 5.x branch is public, and you can test it early if you’d like, but please remember that it’s still in development.

[steve-p96]

@i-just Thank you! I’ll look into it and I’m looking forward to the release of v5 :)