ckeditor5：将 link 目标设置为 _blank

Question

如何让在 ckeditor5 中创建的所有链接都包含 target="_blank"？

我正在使用 Angular 9 创建一个简单的页面编辑器。最终结果是允许用户编辑填充另一个页面的字段。其中一个元素是带有 html 文本的边栏。

页面编辑器包括ckeditor5。基本实现有效。
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;

用户可以在ckeditor框中输入文本，点击向上，'text'保存到数据库，在其他页面检索。

但是，用户希望侧边栏中的链接打开一个新的window (target="_blank")。

以下文档（解释如何在html中实现配置）： https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/angular.html#using-a-custom-ckeditor-5-build

所以我将其添加到 HTML

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

无变化。

文档中有很多关于在以下位置进行这些编辑的参考：

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

我对 component.ts 文件执行了以下操作：

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

导致错误：

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

我无法成功实施 .create，我可以让 ckeditor 将 target="_blank" 添加到链接中。

Answer 1

试试这个：

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

. 在你的 .ts 中：

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

如果您希望用户为每个 link 做出决定，您的配置应该如下所示：

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

}

ckeditor5：将 link 目标设置为 _blank

ckeditor5: set link target to _blank

angular

hyperlink

ckeditor5