MicroCMSのリッチエディタでもHTMLが使いたい！
背景
便利なリッチエディタ
MicroCMSのリッチエディタは、Markdownっぽい入力をに対応してるWYSIWYGエディタです。MicroCMSのAPIがいい感じのHTMLに変換して渡くれるので、サイトにへの反映も非常に簡単です(setHTMLするだけ)。加えて、独自のカスタムクラス(CSSのクラスのことです)を設定できるため、ある程度柔軟にレイアウトを構築することも可能です。これがあれば簡単にブログを作れそうですね！
でも…！
残念なことにリッチエディタではHTMLを用いた入力はできません。入力できるように見えて、APIから返却されたJSONを見てみるとしっかりと記号がエスケープ処理されています。Wordpressのようにリッチエディタからテキストエディタに切り替えることもできません。MicroCMSでもテキストエリアを使えば、HTMLの記述は可能ですがリッチエディタの外部連携機能や書きやすさは失われてしまいます。私はリッチエディタとHTMLを合わせて柔軟なデザインのページを作りたい…！
本題
そもそもCMSで管理しているコンテンツをHTMLで記述するべきではないという指摘は一旦置いとくとして MicroCMSでリッチエディタを使いつつ、柔軟なHTML構成を実現することは可能なのでしょうか？アンサーは可能です。だいぶ面倒な上、UI的にも見やすいとは決して言えないため、おすすめはできませんが必要になる場面はあるかもしれません。
基本的な方法
基本的な方法は上記に書かれているため、説明を省きます。
でもこれだとリッチエディタで入力した箇所をタグで囲ったりできないよ？
リッチエディタで入力した内容を任意のタグで囲いたい場合も考えられますが、上記のサンプルのように並べて、それぞれをsetHTMLするだけではリッチエディタを囲えません。ということでもうちょっとハックしてみましょう。
裏技
テキストエディタにタグの片方だけ書いて、その後にリッチエディタ、最後にテキストエディタで閉じタグといった具合に並べることで、リッチエディタとHTMLを組み合わせることができます。
`###`は繰り返しフィールドの各入力欄の区切りです
###HTML1
<div>
###
###リッチエディタ
# RichEditor
###
###HTML2
</div>
###
実際のレスポンスの一部
"contents": {
"fieldId": "htmlable",
"contents": [
{
"fieldId": "html",
"content": "<div>"
},
{
"fieldId": "rich-editor",
"content": "<h1 id=\"hfa93e1f6fd\">Hoge</h1>"
},
{
"fieldId": "html",
"content": "<h2>Fuga</h2>"
},
{
"fieldId": "rich-editor",
"content": "<h3 id=\"h6f46734047\">Piyo</h3>"
},
{
"fieldId": "html",
"content": "<h4>HogeFuga</h4>"
},
{
"fieldId": "rich-editor",
"content": "<h5 id=\"he9ae6ecc7e\">FugaPiyo</h5>"
},
{
"fieldId": "html",
"content": "<h6>PiyoHoge</h6>"
},
{
"fieldId": "rich-editor",
"content": "<p>HogeFugaPiyo</p>"
},
{
"fieldId": "html",
"content": "</div>"
}
]
}
あとはレスポンスの文字列を結合して、Astroのset:htmlやReactのdangerouslySetInnerHTMLで埋め込めばいいだけです。2枚目の画像を見るとちゃんとエディタを跨いでdivで覆えていることがわかります。
※idが付加されている部分がリッチエディタで記述した部分です。
最後に
以上がMicroCMSのリッチエディタを拡張(?)する方法です。個人的にはCMSで管理するなら制約は強めの方がいいと思っているので、この方法を実際の案件で利用することは避けたいです… ただ意外とやろうとおもばできることは勉強になりました。