1

I want certain links on the website which I added in a CKEditor field to open in a new tab/window by adding the target attribute "_blank". By default, there is no option to select this attribute in the CKEditor interface.

I found this solution which adds a custom CKEditor configuration but couldn't get it work. This page was linked from the CKEditor plugin in Craft CMS describing how to configure the wysiwyg editor. The outcome should look like this: enter image description here

When I go to Settings > CKEditor [Plugins] > Simple [Name of my configuration] > Config Options, I added to the JavaScript field this code:

EditorClass
    .create( document.querySelector( '#editor' ), {
        plugins: [ Link, Typing, Paragraph, Clipboard, Undo, Enter ],
        toolbar: [ 'link', 'undo', 'redo' ],
        link: {
            decorators: {
                isExternal: {
                    mode: 'manual',
                    label: 'Open in a new tab',
                    attributes: {
                        target: '_blank'
                    }
                }
            }
        }
    } );

I assume that this is the right approach but my code is wrong. I am also not sure what the meaning "EditorClass" in the code block is? Does anyone have a solution?

1 Answer 1

2

Don't include EditorClass.create in the JavaScript config. Creating the CKEditor instance is handled by the Craft plugin. The JavaScript code in the configuration should just return an object with your desired configuration:

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

See the example in the plugin documentation.

You can't configure the toolbar or add plugins using this config field. For the toolbar, use the drag-and-drop editor. For plugins, see the documentation on adding plugins.


I would avoid adding the option to open links in a new tab. This is only appropriate in very few scenarios, and usually bad for user experience and accessibility. Users can decide by themselves whether to open a link in a new tab. Don't take that choice away from them.

Here's a good article by the Nielsan Norman Group on that topic.

2
  • 1
    Thank you, Moritz. The code is working and the Nielsen article is great. The article doesn't say per se that you shouldn't open links in new windows but rather observe the user behaviour to under understand their intentions and specify per individual use case whether to open a link in a new window or not. If you don't have that information, it is safer always to open links in the same window. That's how I would summarize it.
    – flip
    Apr 15 at 19:33
  • 1
    @flip Yes, good summary. I think there are very few situations where it's appropriate - for example, an explanation link in the middle of a form that the user is filling out, links where you would lose important inputs or context when clicking on the link. I find it's easier just not to give authors that ability and explain why. Otherwise, make sure to train your authors on that issue and explain when it's appropriate to use.
    – MoritzLost
    Apr 17 at 9:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.