Option to use target="_blank" in links + image links

[kristijorgji]

Hi all and congratulations for the great plugin.

I am using version
"@ckeditor/strapi-plugin-ckeditor": "^0.0.7",

and would love to have more features here such as

1. Ability to select target for the link element.
   

I can only enter the link now but no target
2. The same issue is also for the Media Library. If I include one image and insert link into it cannot use target

[kristijorgji]

Thanks for the workaround @ksyp-7
That is a hack though and not adding support to the editor. You replace all <a with <a target="_blank even when you don't intend to have a new tab link!

I would like to have this option in the editor itself so we can have some links that open in new tabs other within same tab

[vr1e]

This one: #65

[kristijorgji]

@vr1e thanks for the update. I like the PR there but would be better not to have noopener noref as sometimes you might link internally with target _blank (new tab) and still want to trust those pages.
In that case the plugin would be better to have option to override rel as well would be perfect to choose both target and rel manually if needed

[royanon]

I think you can pass config to the options like so

        link : {
          defaultProtocol: 'https://',
          decorators: [
            {
              mode: 'manual',
              label: 'Open in a new tab',
              attributes: {
                target: '_blank',
                rel: 'noopener noreferrer'
              }
            }
          ],
        },

I put this in /admin/src/components/CKEditorInput/Configurator.js

[kristijorgji]

@royanon

Are you using this npm package "@ckeditor/strapi-plugin-ckeditor": "^0.0.10",

I saw no documentation there for the config you provided above.

I am using Typescript by the way, so where should I put the config you put at /admin/src/components/CKEditorInput/Configurator.js

Thank you

[kristijorgji]

@royanon please need more help as both the documented solution and your answer is not working for me.

I added the following config under myStrapiApp/config/ckeditor.txt as documented at https://market.strapi.io/plugins/@_sh-strapi-plugin-ckeditor#configuration

globalThis.CKEditorConfig = {
    configs: {
        markdown: {
            editorConfig: {
                link: {
                    defaultProtocol: 'https://',
                    decorators: [
                        {
                            mode: 'manual',
                            label: 'Open in a new tab',
                            attributes: {
                                target: '_blank',
                                rel: 'noopener noreferrer'
                            }
                        }
                    ],
                },
            }
        }
    }
}

then I do rm -rf dist && yarn build && yarn develop and nothing happens.

I still don't see the "Open in a new tab" in the UI.

[mauro-montano]

@royanon please need more help as both the documented solution and your answer is not working for me.

I added the following config under myStrapiApp/config/ckeditor.txt as documented at https://market.strapi.io/plugins/@_sh-strapi-plugin-ckeditor#configuration

globalThis.CKEditorConfig = {
    configs: {
        markdown: {
            editorConfig: {
                link: {
                    defaultProtocol: 'https://',
                    decorators: [
                        {
                            mode: 'manual',
                            label: 'Open in a new tab',
                            attributes: {
                                target: '_blank',
                                rel: 'noopener noreferrer'
                            }
                        }
                    ],
                },
            }
        }
    }
}

then I do rm -rf dist && yarn build && yarn develop and nothing happens.

I still don't see the "Open in a new tab" in the UI.

@kristijorgji Could you solve it? I have the same problem

[Arunjenson-ss]

any updates on this?

[tan-eson]

Thank you @royanon and @kristijorgji, I've managed to add the option to open in new tab using your method.

For those wondering, I'm using:
"@ckeditor/strapi-plugin-ckeditor": "^0.0.12",

In the following file directory:
node_modules/@ckeditor/strapi-plugin-ckeditor/admin/src/components/CKEditorInput/Configurator.js

CKEditor config is divided into 3 presets, add the piece of code below in the desired presets, to allow option for opening URL in new tab for image urls.

link : {
      defaultProtocol: 'https://',
      decorators: [
        {
          mode: 'manual',
          label: 'Open in a new tab',
          attributes: {
            target: '_blank',
            rel: 'noopener noreferrer'
          }
        }
      ],
    },

This is what workekd for me:

[vr1e]

@tan-eson So you configured the CK editor directly in the node_modules. Not good, as that will get overwritten on any update.

[Reinmar]

We merged #65 recently and released it as v0.0.13 :)