<p>Don't include <code>EditorClass.create</code> 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:</p>
<pre class="lang-javascript prettyprint-override"><code>return {
    link: {
        decorators: {
            isExternal: {
                mode: 'manual',
                label: 'Open in a new tab',
                attributes: {
                    target: '_blank'
                }
            }
        }
    }
}
</code></pre>
<p>See the <a href="https://github.com/craftcms/ckeditor?tab=readme-ov-file#registering-custom-styles" rel="nofollow noreferrer">example in the plugin documentation</a>.</p>
<p>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 <a href="https://github.com/craftcms/ckeditor?tab=readme-ov-file#adding-ckeditor-plugins" rel="nofollow noreferrer">documentation on adding plugins</a>.</p>
<hr />
<p>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.</p>
<p><a href="https://www.nngroup.com/articles/new-browser-windows-and-tabs/" rel="nofollow noreferrer">Here's a good article by the Nielsan Norman Group on that topic.</a></p>

CC BY-SA 4.0
2024-04-15T19:33:25.807Z
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
CC BY-SA 4.0
2024-04-17T09:35:06.697Z
@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
CC BY-SA 4.0
2024-04-15T15:04:53.013Z
2024-04-15T15:26:08.607Z
2024-04-15T15:26:08.607Z
MoritzLost
<p>I want certain links on the website which I added in a <a href="https://plugins.craftcms.com/ckeditor?craft5" rel="nofollow noreferrer">CKEditor field</a> to open in a new tab/window by adding the target attribute &quot;_blank&quot;. By default, there is no option to select this attribute in the CKEditor interface.</p>
<p>I found <a href="https://github.com/ckeditor/ckeditor5/issues/4829#issuecomment-505882498" rel="nofollow noreferrer"><strong>this solution</strong></a> which adds a custom CKEditor configuration but couldn't get it work. <a href="https://ckeditor.com/docs/ckeditor5/latest/api/module_core_editor_editorconfig-EditorConfig.html" rel="nofollow noreferrer">This page</a> was linked from the CKEditor plugin in Craft CMS describing how to configure the wysiwyg editor. The outcome should look like this:
<a href="https://i.sstatic.net/lvNox.gif" rel="nofollow noreferrer"><img src="https://i.sstatic.net/lvNox.gif" alt="enter image description here" /></a></p>
<p>When I go to Settings &gt; CKEditor [Plugins] &gt; Simple [Name of my configuration] &gt; Config Options, I added to the JavaScript field this code:</p>
<pre><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'
                    }
                }
            }
        }
    } );
</code></pre>
<p>I assume that this is the right approach but my code is wrong. I am also not sure what the meaning &quot;EditorClass&quot; in the code block is? Does anyone have a solution?</p>

<link><attribute><wysiwyg><ckeditor5><craft5>
How to add the option for a link to select a target, e.g. open link in new window? [CKEDITOR Plugin]
# How to add the option for a link to select a target, e.g. open link in new window? [CKEDITOR Plugin]

(Asked by: username_0 on 2024-04-15)

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:

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?

**Tags:** link, attribute, wysiwyg, ckeditor5, craft5


---

## 1 answers

### Answer by username_1 on 2024-04-15. Score: 4 | Accepted answer

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.

> **Comments:**
> **username_0**: 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.  
> **username_1**: @username_0 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.  

---

