Craft CMS の CKEditor のリンクボタンを別タブで開くリンクも設定できるようにする

Craft CMS の CKEditor のリンクボタンで target="_blank" を設定できるようにする方法をご紹介します。

Craft CMS Logo

先日、ついに Craft 5 がリリースされましたね。このブログも早く Craft 5 にアップデートしたいと思いますが、今日はまだ Craft 4 の CKEditor のお話です。

CKEditor プラグインではフィールドごとにボタンの設定を変えることができます。今回は、リンクボタンで target="_blank" が設定できるようにする方法をご紹介します。

CKEditor プラグインの設定

「Settings > CKEditor」から CKEditor Configs のページを開きます。

Clean Shot 2024 04 05 at 17 51 17 2x

そして変更したい設定を開きます。ここではこのブログの本文に使っている「ブログ本文」の設定を開きます。

Clean Shot 2024 04 05 at 17 52 18 2x

ツールバーの設定

ツールバーにリンクボタンをドラッグ&ドロップします。

Clean Shot 2024 04 05 at 17 52 54 2x

そしてページ下部にある「Config Options」に下記のJSONを追加(またはマージ)します。

{
  "link": {
    "decorators": {
      "openInNewTab": {
        "attributes": {
          "rel": "noopener noreferrer",
          "target": "_blank"
        },
        "label": "Open in a new tab",
        "mode": "manual"
      }
    }
  }
}

これで別タブ表示を設定できるようになりました。

Clean Shot 2024 04 05 at 18 04 37 2x
Published 2024-04-05
Updated 2024-04-09