microCMSでHTMLテーブルを使う

これはなに？

WordPressからmicroCMSに移行するにあたって、テーブル記事がうまく移行できず困っていたので、若干無理やりに対応したメモです。

なお、microCMSは今のところ使いやすくていい感じなので、今後も応援しています！

ある日のこと

microCMS + Nuxtでの実装でWordPressにあった記事をある程度移行していたのですが、ある程度の記事を移行した段階で「HTMLテーブルが移行できないんですがなんとかなりませんか？」と相談があった。

公式を調べると...

2021年10月現在、できないが、「代替手段として繰り返しフィールドによる入稿等をご検討ください」とのこと。

以下の内容を確認し、繰り返しフィールドを設定すれば可能とのことでした。
https://blog.microcms.io/input-richeditor-and-html/

ここで問題が...。
うちの事情としてすでにある程度の記事を移行しており、ここでフィールドを変更して全記事コピペして回るのはやりたくないな...となり、API経由での移行を試しました。
getのAPIで記事のリッチエディタのコンテンツを取得すると、HTMLが取得されます。
その後、patchのAPIで別フィールドに値をセットして更新したところ、HTMLがサニタイズした状態で記事として更新されるという状態になり、get/patch APIを使った移行がうまくいきませんでした。

• リッチエディタでの入力

## 概要
ほげほげ

↓

• get APIで取得された内容

<p>概要</p><br>ほげほげ

↓

• これをそのままpatch APIで送信した場合に以下のようになってしまうという事象です。

<p>概要</p></br>ほげほげ

patch APIにHTMLをそのまま送るモードはないものか...となったのですが断念。

結局どうしたか

今回はvue側でdata.bodyを無理やり差し替えることで実現しました。

あまり良い方法ではないのでどうしてもHTMLテーブルを実現したい人以外にはおすすめしませんが、困っている人がいるかもしれないのでそういう方のお役に立てば...。

  async asyncData ({ params, $microcms }) {
    const data = await $microcms.get({
      endpoint: 'posts',
      contentId: params.id
    })

    // body内のhtmlについて、tableタグだけは採用する
    const allowedTags = ['table']
    allowedTags.map((tag) => {
      const result = data.body.match(new RegExp(`<${tag}.+/${tag}>`, 'g'))
      return result && result.map((m) => {
        const html = m.replace(/&lt;/g, '<').replace(/&gt;/g, '>').replace(/&nbsp;/g, ' ')
        data.body = data.body.replace(m, html)
        return data.body
      })
    })

    return data