リッチエディタ内の画像に対して、画像APIを適用したい

リッチエディタ内の画像に対しては、縦幅/横幅の指定のみ画像APIの機能を利用できます。
任意の画像をクリックすると、以下の様に設定メニューが表示されます。
スクリーンショット 2022-03-28 11.05.28
それ以外の画像APIのパラメータは、現在のところ指定することができません。

他のパラメータについても利用されたい場合は、3つ方法が考えられます。

繰り返しフィールドを利用する

 

繰り返しフィールドを利用することで、リッチエディタと画像フィールドを組み合わせて、入稿することが可能になります。
その場合、画像部分がリッチエディタから分離されるため、フロントエンド側でパラメータの付与を自由に行うことが可能になります。

以下に「リッチエディタ」と「テキストエリア」を併用する事例がございますので、こちらの「テキストエリア」を「画像フィールド」に読み換えていただくと良いかと思います。

リッチエディタのHTMLを書き換える

 

cheerio」のようなライブラリを利用すると、APIから返却されたHTML形式のテキストデータをパースし、DOM要素の操作が可能になります。
こちらのライブラリを利用して、リッチエディタのHTML内のimgタグを書き換えて、パラメータを付与する方法が考えられます。
以下にcheerioを利用したパースの実例がありますので、よろしければご参照ください。

richEditorFormat=objectを利用する

コンテンツAPIへリクエストする際のクエリに、"richEditorFormat=object"を指定すると、リッチエディタ内の要素がオブジェクトの配列として返却されます。

レスポンスがオブジェクトとして返却されるため、画像に対するパラメータを付与するなどの処理が行いやすくなります。

その一方で、レスポンス内容に応じて、それぞれのHTMLタグの出力内容を設定する必要があるというデメリットがあります。

リッチエディタの設定で、利用できる装飾ボタンを制限すると、設定が必要となるパターンが減りますので、"richEditorFormat=object"を利用する際は合わせて利用することをおすすめします。