Zenn
🍖

RedactorからCKEditorにコンバートしてみた

2024/04/09に公開
#
wysiwyg
#
craftcms
tech

アップデートがあります

えっ！？

CKEditorってなんやろか

本家P&Tの公式プラグインだそう。
それなら今後はこちらで全然大丈夫そうですね。

なんと！コンバータがあるようです。

やってみましょう

デフォルトでやっても分からなそうなので
シンプルな例ですがこのカスタム定義でやってみます。

topics.json
{
  "buttons": [
    "formatting",
    "bold",
    "underline",
    "unorderedlist",
    "link"
  ],
  "minHeight": "300px",
  "formatting" :["p","h2", "h3", "h4", "h5"],
  "linkNewTab": true,
  "toolbarFixed": true
}

インストール

環境はlocalに展開しているddevのCraft4です。

そう言えばCraft5になってからSuperTableってどう差別化されるのかなぁ...。

CLIでLet's コンバート

コマンドはこちら
ホスト側で実行してエラー起こして？？？？になってた、ちゃんとコンテナに入りましょう。

#コンテナに接続
@shin_develop ddev ssh
@craft php craft ckeditor/convert

こういう感じで対話形式で進めていくみたい。

Xdebug: [Step Debug] Could not connect to debugging client. Tried: host.docker.internal:9003 (fallback through xdebug.client_host/xdebug.client_port).
 → Looking for Redactor fields in the project config … ✓

   5 Redactor fields found:
 - matrixBlockTypes.7ba9d65a-75c6-40db-bb96-7ac805c244cb.fields.d5691967-3482-42b8-94ab-95f3f8045718 (child_text)
 - matrixBlockTypes.06849e64-bc29-4c0e-a2e5-9ede91f35808.fields.a388a71b-8b64-44b6-9409-d5c2fb96d1c4 (child_text)
 - superTableBlockTypes.0aebc583-58bc-4373-a5b4-c026cf0f049b.fields.912415eb-f90e-427b-8fc2-7346bb91194b (item)
 - superTableBlockTypes.8f59c768-1db0-4de5-a91a-52bf99c37b04.fields.0db9a590-8b0d-43a6-ada1-b655a58a1647 (item)
 - superTableBlockTypes.bf8335d0-3d2d-4d8b-8b75-1a93324fc911.fields.7636eee9-6205-4a4a-b6ee-f75d7d716374 (item)

 → Converting matrixBlockTypes.7ba9d65a-75c6-40db-bb96-7ac805c244cb.fields.d5691967-3482-42b8-94ab-95f3f8045718 (child_text) …

   Do you already have a CKEditor config that should be used in place of the blog Redactor config? (yes|no) [no]:

別フィールドの話（blog.json）っぽいが
CKEditor用のconfigファイルはあるのかい？ってことで
ひとまず no を突きつけてみる。

    → Generating Blog CKEditor config …

      ️  The following Redactor config items aren’t supported by CKEditor:
          - formatting: 
             - div
          - linkNewTab: true

      Continue anyway? (yes|no) [yes]:

この定義方法はCKには対応してませんって話らしいのでそれでもいいよって感じで yes。
ていうかformatting:divってそもそもRedactorでも対応してたっけな。

topicsフィールドも同様にCKEditorのconfigは無いので no

   Do you already have a CKEditor config that should be used in place of the topics Redactor config? (yes|no) [no]:

同じくサポートしてない設定云々。
新しいタブで開くやつ。

  The following Redactor config items aren’t supported by CKEditor:
          - linkNewTab: true

これちょうどtinybeansさんが記事にしてたのでこちらを参照いただけると。

変換完了

新たにproject/ckeditor/configs/*.yamlが生成されてた。
Redactorで言うところのconfig/redactor/*.jsonに対応してる...のか？
直接定義をイジる必要はなくなってて、管理画面で編集出来るようになってる模様。

topicsのやつ.yaml
headingLevels:
  - 2
  - 3
  - 4
  - 5
name: Topics
options:
  code:
    indentSequence: '  '
toolbar:
  - heading
  - '|'
  - bold
  - underline
  - bulletedList
  - link

pタグの定義消えてるけどまぁええか

管理画面確認

フィールド定義

CKEditorに変わってる〜

CKEditor Config？？

は、ここで指定されていると思われる。
（pタグの定義消えたって書いたがデフォルトがparagraphなんで問題なさそうだった）
前述のproject構成ファイルはここで作られるようなので、原始的にjsonを編集する必要はないみたい。

入力画面

UIに微妙な変化はあるものの機能的には問題なし

いけるやん！

とは言え複雑にカスタムしてる場合についてはもう少し検証の余地がありそう。
おわり

Discussion