< back to top
avatar

Ryotaro Tsuda

埋め込み要素(iframe / embed)をいい加減対応させたい

2021年6月9日(水) 1時2分54秒

何故かmicroCMSは埋め込みが特定のサービスしか対応していないので
独自でHTMLを書いて埋め込むのができない

なので埋め込みを対応できるように自力で実装しようと思う。

embed用スキーマ作成

まず、スキーマはこんな感じにした


カスタム要素でテキストフィールドとプルダウンを追加、それぞれembedしたい生のHTMLと文中のどこに入れたいかを定義する識別子となっている
それをブログ記事の項目で繰り返し要素として挿入する

識別子登録

とりあえず重複を防ぐためにembed1 - embed5までの識別子をデフォルトで用意した
文中内に


と挿入されれば指定されたembed1のHTMLがインサートされる仕組みにしたい

ブログ側で実装

このように実装した。すげーシンプル

let embeds = payload.post.embeds;
for(let i in embeds){
    body = body.replace(embeds[i].insertpoint[0],embeds[i].html);
}

結果

埋め込まれるはず↓↓