neko-note′

microCMSの旧リッチエディタを新リッチエディタに移行した

先日microCMSの新リッチエディタが正式リリースされました。ということで記事の少ないうちにサクッと以降しておこうということでやってみたという記事になります。

方針

  1. 新リッチエディタのフィールドtmp_body (旧リッチエディタのフィールド名はbody)を追加
  2. bodyの中身をtmp_bodyにコピー
  3. ローカル(または開発環境)で確認
  4. 修正が必要な箇所を修正
  5. 修正したバージョンをリリース
  6. bodyフィールド(旧リッチエディタ)を削除してtmp_bodyの名前をbodyに変更
    ※ここでデータが消えるかもしれないので心配な人はバックアップ推奨
  7. 移行完了

やってみて

僕が遭遇したケースは次のものでした。

  1. 空行がbrではなくなったので、文章間でスペースを開けたいところが詰まるようになった
  2. ネストしたリストがコピー後にフラットになってた
  3. imgがfigureでラップされるようになった

2の方はエディタの方で修正すればOKなので、すぐに解決。3もfigureの対応をコードに入れるだけで解決。1の方はコード側の対応も必要だったので、詳細を記載します。

スペースを開けたいところの対応

僕の場合次の2箇所にスペースを入れていました。

  • リストの後
  • pとpの間

リストの方は一括でスペースが入るようにCSSの結合子を使ってp + ulやp + ol、ul + p、ol + pで上方向にスペースが入るようにしました。

pとpの方はカスタムclassを使って対応しました。ちょうど上の文章との隙間にある↑このスペースですね。文章の切れ目など見栄え上入れてるやつです。このカスタムclassは指定したテキストをspanで囲って、そこに任意のclassを付けることができる機能になります。僕がやりたいこととしては次のようなことでした。(cms-spaceは僕が定義したこのスペースを付けるときに指定するカスタムclassです)

<p> <-- ここの上部にスペースを付けたい -->
  <span class="cms-space">なにかテキスト</span>
</p>

普通にカスタムclassにスタイルを書くとspanに対してmarginが付いてしまい、親の要素をはみ出る形でスタイルされてしまいます。個人的には要素をはみ出るのは嫌なので、pの方にmarginを持つようにしたかったです。こういうときに使えるのが:has()ですね。次のように書けばやりたいことが実現できます。

p:has(span.cms-space) {
  margin-top: 16px;
}

以上が僕の行った対応でした。

まとめ

僕の場合は装飾系がほとんどなかったので割りと楽に移行できたと思います。将来的にはスクリプトによるマイグレーションが提供されるようなので、そっちを待つのも手かなとは思います。(直接色指定してるようなコンテンツなど、旧エディタの機能をもりもりに使ってた場合はどうするんだろうというのは気になりますが)

Appendix