TinyMCEでアップした画像にloading=”lazy”を追加する

この記事は最終更新から1年以上経過しています。内容が古くなっているかもしれません。。

extended_valid_elementsで上書きするのが一番楽

以下のコードを、

extended_valid_elements: 'img[class|src|alt|width|loading=lazy]',

こんな感じで追記。

tinymce.init({
  selector: 'textarea',
  extended_valid_elements: 'img[class|src|alt|width|loading=lazy]',
  ~以下略~
});

設定後、スマホでエディター内の画像が表示されなくなる可能性あり。その場合は表示直前にPHPで処理する方法がおすすめ。

echo str_replace('<img', '<img loading="lazy"', $your_var);

この記事はお役に立てましたか?

はい

ブログランキング・にほんブログ村へ

コメントを残す