ckeditor5:将链接目标设置为_blank

Question

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

我正在使用角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框中键入文本，单击up，将“文本”保存到db中，并在另一个页面上检索。

但是，用户希望侧栏中的链接打开一个新窗口(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，我可以让注册用户将target="_blank“添加到链接中。

Answer 1

试试这个：

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

.and在您的.ts中：

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

​

如果您希望用户决定每个链接，您的配置应该如下所示：

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

}