久々の投稿です。
かなり便利そうな新リッチエディタを使えるようセットした記録です。
使用感としては新旧どちらも一長一短あるなという感じでした。現状としては、両方を繰り返しフィールドに入れて併用するのがおススメです。

はじめに

先日、microCMS の新リッチエディタが公開されました。実際にこの機能に対応していきたいと思います。

新リッチエディタへの対応

新リッチエディタは、新規のフィールドタイプとしてリリースされました。
HTML を返してくれるという基本動作は旧版と変わりません。なので基本はフロントを弄らず CMS 側の中身を置き換えるだけで大体は完了できます。

フィールド定義を変更する

今年の4月にしれっと実装された仕様変更により、フィールドの種類が変更不可になっています。
当サイトでは以前から記事本文に表などを挿入するため繰り返しフィールドとしていたため影響は最小限に抑えられました。 (旧リッチエディタを API スキーマに直接指定していた場合は、一度別名でフィールドを追加作成した後にコンテンツを全て置き換える必要があります。)

API スキーマの仕様変更情報

① カスタムフィールドとして新リッチエディタを定義

繰り返しフィールドでは直接フィールドの種類を指定できません。一度カスタムフィールドにリッチエディタを追加する必要があります。右上のカスタムフィールドボタンから追加していきます。

まず、カスタムフィールド名等の入力です。ここでは分かりやすく新リッチエディタと名前をつけておきます。

カスタムフィールド名・ID の設定

② カスタムフィールドの API スキーマ定義

ここでは新リッチエディタのみを登録します。ここのフィールド ID は、フロントエンドで旧リッチエディタを読む際のものと同じ値をセットしておきましょう。表示名は自由ですが、新リッチエディタとします。

カスタムフィールドの API スキーマ定義

③ レイアウト (段組み) の設定

ここはお好みでどうぞ。

レイアウトの設定

追加完了です。

カスタムフィールドの一覧

④ 繰り返しフィールドの要素に指定

API 設定 > スキーマ > 繰り返しフィールドの詳細設定 へ進み、先ほど作成したカスタムフィールドを選択します。

繰り返しフィールドの種類選択

以上。

これで、今まで通り繰り返しフィールドの追加を押すと新リッチエディタが選択できるようになります。(この表示順が変えられない点はちょっと気に入らない)

カスタムフィールド選択画面

旧エディタからの記事移行

基本的に過去記事を少しずつ新エディタにコピペして差し替えるだけです。ただし、一部廃止された機能があるのでカスタム CSS を先に登録しておく必要があります。
なお旧エディタからのマイグレーション機能が今後される実装予定とのことなので、それまで待ってもいいかも知れません。

旧エディタであてられる CSS を登録していく

カスタム CSS の登場により CSS で定義できてしまいそうな機能は大幅に削除されています。
移植後も同じ見た目を再現するため、一度 API プレビューなどから当てられている CSS を確認し、よく使う機能の代替を登録をしていきます。(一部再現不能なものもあるため、筆者は旧エディタも併用する運用をしています。) CSS フレームワークの UIkit3 を使用しているため、 基本は uk-* を基本登録していきます。なお、カスタム CSS は カスタムフィールド > 新リッチフィールド > スキーマ > リッチフィールドの詳細設定 から管理できます。

ちなみに今までできていた、ここのページでもやっている画像を論文風に中央揃えして下にキャプションを付けるという使い方は新エディタでは再現できなくなっているようです。(画像にカスタム CSS を当てるということも、現時点では出来ませんでした。)

Text

UIkit3 には、Pre-Defined なテキスト用 Class も定義されているので追加するだけです。

カスタム class

ちなみに、旧リッチエディタでのフォントサイズ指定は下のような設定になっていました。

インデント

padding-left: (3 * N) em で後ろ下げしていた。
同じ挙動を再現するのは難しいので、IndentLevel-1 などと段階毎に名前をつけて登録するのが限界。