CKEditor 5 链接：设置链接的默认目标或编辑目标答案

【问题标题】：CKEditor 5 links: Set default target for links or edit targetCKEditor 5 链接：设置链接的默认目标或编辑目标
【发布时间】：2018-08-28 05:01:37
【问题描述】：

在 CKEditor 5 中，我在链接对话框中看不到目标属性字段。

如何添加这样的字段？或者将 target=_blank 设置为默认值。谢谢

【问题讨论】：

这真是太奇怪了，没有简单的方法可以做到这一点。开发者到底在想什么？？？

标签： ckeditor ckeditor5

【解决方案1】：

您可以通过在CKEditor初始化脚本中添加此代码来实现它：

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        // ...
        link: {
            decorators: {
                openInNewTab: {
                    mode: 'manual',
                    label: 'Open in a new tab',
                    defaultValue: true,         // This option will be selected by default.
                    attributes: {
                        target: '_blank',
                        rel: 'noopener noreferrer'
                    }
                }
            }
        }
    } )
    .then( ... )
    .catch( ... );

这是Documentation Link。它会正常工作的。

【讨论】：

【解决方案2】：

从Link Plugin 的11.1.0 版本开始，添加了link decorator 功能。此功能提供了一种简单的方法来定义规则，何时以及如何向链接添加一些额外的属性。

可能有手动或自动decorators。

First 提供了一个 UI 开关，可由用户切换。当用户编辑链接并切换它时，预配置的属性将被添加到链接中，例如target="_blank".

第二个，在从编辑器获取内容时自动应用。这里你需要提供一个回调函数，它根据链接的 URL 决定是否应该应用给定的一组属性。

还有一个预配置的装饰器，可以通过简单的config.link.addTargetToExternalLinks=true 打开。它会将target="blank" 和rel="noopener noreferrer" 添加到以http://、https:// 或// 开头的所有链接。

【讨论】：