CKEditor config addTargetToExternalLinks doesn't look for internal links.

[mikesnoeren]

Description

When adding this option the expected behaviour would be that only external links get the target="blank" attribute, however, all links get it.

Config:

return {
  link: {
    addTargetToExternalLinks: true,
  },
}

Workaround is to set targets manually, using this config:

return {
  "link": {
    "decorators": {
      "openInNewTab": {
        "attributes": {
          "target": "_blank"
        },
        "label": "Open in a new tab",
        "mode": "manual"
      }
    }
  }
}

[lukas-jansen]

https://ckeditor.com/docs/ckeditor5/latest/features/link.html#adding-target-and-rel-attributes-to-external-links looks to be the expected behavior for CkEditor but it is confusing that links to entries are now also getting it.
Maybe it shouldn't be set as a default config option?

[brandonkelly]

Gross, I didn’t realize how loosely it labels links as “external”. The ckeditor/convert command won’t set link.addTargetToExternalLinks = true anymore going forward.

[brandonkelly]

CKEditor 3.4.0 is out with that change.

[remcoov]

@brandonkelly Internal links are still being treated as external links, in new CKEditor fields..

[kevinmu17]

When using the decorator within the link option and you are using the rel attribute, you need to update your htmlpurifier config with this:

CKeditor config option (within the Craft CMS cp)

{
  "link": {
    "addTargetToExternalLinks": false,
    "decorators": {
      "openInNewTab": {
        "attributes": {
          "rel": "noopener noreferrer",
          "target": "_blank"
        },
        "label": "Open in a new tab",
        "mode": "manual"
      }
    }
  }
}

htmlpurifier config (.json)

{
  "Attr.AllowedFrameTargets": [
    "_blank"
  ],
  "Attr.AllowedRel": [
    "noopener",
    "noreferrer"
  ]
}

Maybe this can be implemented as a default @brandonkelly ? since the rel option to externals is necessary for security reasons

[CreateSean]

I copied what @kevinmu17 pasted above and I still don't see an option to control the target when creating a link in Craft.

Every single link whether internal or external is now opening in a new tab. Really need a solution to this..

[brandonkelly]

I copied what @kevinmu17 pasted above and I still don't see an option to control the target when creating a link in Craft.

@CreateSean If the “Open in a new tab” decorator isn’t showing up, you must have put the decorator settings in the wrong CKEditor config, or in the wrong spot. I just copied @kevinmu17’s config verbatim to my install, to make sure there’s no typos or anything.

Every single link whether internal or external is now opening in a new tab. Really need a solution to this.

That will only happen automatically if link.addTargetToExternalLinks is set to true.

[realjoshharrison]

Building on #98 (comment) from @kevinmu17, you can create a custom automatic decorator with external detection - here's my JavaScript config in the CP:

return {
  link: {
    decorators: {
      detectExternalLinks: {
        mode: 'automatic',
        callback: url => ! url.startsWith(window.location.origin),
        attributes: {
          target: '_blank',
          rel: 'noopener noreferrer',
        }
      }
    }
  }
}

Obviously this only works when the front end and control panel are both running on the same origin. There's probably a better way, but it's a start!

[jeroenlammerts]

Related issue having trouble with the switch not detecting after save.

#280