Angular13中CKEditor5 addTargetToExternalLinks失效，外链无法新标签打开

可能原因及对应解决方案 #

1. 确认Link插件已正确引入 #

CKEditor5的链接功能依赖Link插件，需确保你的编辑器实例已包含该插件：

// 示例：在editorService中配置编辑器
import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
import Link from '@ckeditor/ckeditor5-link/src/link';
// 其他必要插件...

export class EditorService {
  Editor = ClassicEditor;
  // 编辑器基础配置
  get baseConfig() {
    return {
      plugins: [Link, /* 其他已用插件 */],
      // 其他全局配置...
    };
  }
}

若未引入Link插件，所有链接相关配置都不会生效。

2. 自定义外部链接判断逻辑（替代默认配置） #

默认的addTargetToExternalLinks依赖CKEditor内置的域名判断逻辑，可能因业务场景差异失效。可手动定义装饰器，精准控制外部链接的行为：
修改组件中的CKEditor配置：

<ckeditor 
  [editor]="editorService.Editor" 
  [config]="{ 
    link: { 
      decorators: {
        addTargetToExternalLinks: {
          mode: 'automatic',
          // 自定义判断规则：非当前域名、非相对路径、非锚点的链接视为外部链接
          callback: url => !url.startsWith(window.location.origin) && !url.startsWith('/') && !url.startsWith('#'),
          attributes: {
            target: '_blank',
            rel: 'noopener noreferrer'
          }
        }
      }
    },
    language: 'de' 
  }" 
  [(ngModel)]="data" 
  (change)="handleEditorChange($event)"
>
</ckeditor>

该配置会强制给符合条件的外部链接添加target="_blank"和安全的rel属性。

3. 排查配置冲突 #

若项目中存在全局CKEditor配置或自定义插件，需确认：

• 没有其他代码篡改链接的target属性
• 全局配置未重载link.decorators相关设置

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