Angular9集成CKEditor5如何让所有插入链接默认携带target="_blank"属性

1. 修正组件ts文件配置 #

Angular集成的CKEditor组件会自动完成实例初始化，不需要手动调用Editor.create()方法，你只需要提前定义好配置对象即可：

...
import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic';
...
public Editor = ClassicEditor;
// 新增CKEditor配置对象
public ckeditorConfig = {
  link: {
    // 所有链接默认加_blank用下面的decorators配置
    decorators: {
      openInNewTab: {
        mode: 'automatic',
        attributes: {
          target: '_blank',
          rel: 'noopener noreferrer'
        }
      }
    }
    // 仅外部链接加_blank则删掉上面decorators，用下面这行即可
    // addTargetToExternalLinks: true
  }
};

2. 修正HTML中ckeditor标签的绑定 #

你之前错误将[config]绑定为数组，调整为绑定上面定义的配置对象即可：

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

• 手动调用this.Editor.create()时没有传入挂载的DOM元素参数，导致找不到实例根节点抛出数据初始化错误，Angular集成场景不需要手动调用该方法。
• 第一次配置未生效是因为[config]接收的参数应为普通对象，你传入的是数组格式，且配置层级不符合要求。

内容的提问来源于stack exchange，提问作者Chip Michael