ckeditor5: set link target to _blank

Question

How do I get all links created in ckeditor5 to include target="_blank" ?

I am using Angular 9 to create a simple page editor. The end result is to allow a user to edit the fields that populate another page. One of the elements is a sidebar with html text.

The page editor includes ckeditor5. The basic implementation works.
HTML

<ckeditor [(ngModel)]="SidebarContent" name="SidebarContent" [editor]="Editor" [data]="SidebarContent" #pageSidebarContent="ngModel" ></ckeditor>

component.ts

...
import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic';
...
public Editor = ClassicEditor;

The user can type in text into the ckeditor box, click up, the 'text' is saved to the db, and retrieved on the other page.

However, the user wants the links in the sidebar to open up a new window (target="_blank").

The following documentation (explains how to implement config in the html): https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/angular.html#using-a-custom-ckeditor-5-build

So I adding this to the HTML

<ckeditor [(ngModel)]="SidebarContent" name="SidebarContent" [editor]="Editor" [data]="SidebarContent" #pageSidebarContent="ngModel" [config]="[{link:{addTargetToExternalLinks:true}}]"></ckeditor>

No change.

The documentation has lots of references to making these edits in:

ClassicEditor
    .create( document.querySelector( '#editor' ) )

I did the following to the component.ts file:

this.Editor.create({
      link: {
        decorators: {
            addTargetToExternalLinks: {
                attributes: {
                    target: '_blank',
                    rel: 'noopener noreferrer'
                }
            }
        }
      }
    })

Causes an error:

CKEditorError: datacontroller-init-non-existent-root: Attempting to init data on a non-existing root. Read more: https://ckeditor.com/docs/ckeditor5/latest/framework/guides/support/error-codes.html#error-datacontroller-init-non-existent-root

I can't successfully implement .create and I can get ckeditor to add target="_blank" to the links.

Answer 1

try this:

 <ckeditor [editor]="Editor" [config]="config"[(ngModel)]="text"></ckeditor>

.and in your .ts:

config = {
    toolbar: [
      '_',
      'bold',
      'italic',
      'link',
      'bulletedList',
      'numberedList',
    ],
    link : {
      addTargetToExternalLinks: true
    }
  }

if you want the User to decide for each link, your config should look like that:

  config = {
language: 'de',
toolbar: [
  '_',
  'bold',
  'italic',
  'link',
  'bulletedList',
  'numberedList',
],
link : {
  addTargetToExternalLinks: true,
  decorators: [
    {
      mode: 'manual',
      label: 'External Link',
      attributes: {
        target: '_blank',
      }
    }
  ]
}

}