リッチエディタで画像の配置を設定できますか？

リッチエディタ内で画像の配置（左寄せ、右寄せ、中央寄せなど）を直接設定することはできません。

しかし、繰り返しフィールドとカスタムフィールドを利用して、サイト側の実装で画像の配置を調整することは可能です。

実装例

1. カスタムフィールドの設定

まず、以下のようにカスタムフィールドを設定します。

contentにはリッチエディタのみ設定します。
imageCenter、imageRightには画像フィールドのみ設定します。

※左寄せの画像についてはcontentのリッチエディタ内で設定できるため省略しています。

2. APIスキーマの設定

次に、以下のようにAPIスキーマを設定します。

titleには記事のタイトルを入力するためのテキストフィールドを設定します。
bodyには繰り返しフィールドを設定し、先ほど作成したcontentとimageCenter、imageRightを選択します。

コンテンツを入稿し、リクエストすると以下のようなレスポンスになります。


  "title": "記事のタイトルが入ります",
  "body": [
    {
      "fieldId": "content",
      "richEditor": "<h2 id=\"hfe9adf551f\">見出しが入ります</h2><p>テストテキストテストテキストテストテキストテストテキストテストテキストテストテキスト</p><p>テストテキストテストテキストテストテキストテストテキストテストテキストテストテキスト</p><p></p>"
    },
    {
      "fieldId": "imageCenter",
      "image": {
        "url": "https://images.microcms-assets.io/assets/xxxxxx/yyyyyy/1200x800.png",
        "height": 800,
        "width": 1200
      }
    },
    {
      "fieldId": "imageRight",
      "image": {
        "url": "https://images.microcms-assets.io/assets/xxxxxx/yyyyyy/1200x800.png",
        "height": 800,
        "width": 1200
      }
    }
  ]
}

3. フロントエンドの実装

fieldIdの値を使用して、各コンポーネントを条件に応じて出し分けます。

具体的には、body内の各項目のfieldIdの値に応じて、適切なコンポーネント（リッチエディタ、中央寄せ画像、右寄せ画像）を表示します。

Next.jsとTailwind CSSを利用した実装例

export default async function NewsDetail() {
  const data = await client.getListDetail({
    endpoint: 'news',
     contentId:'contentId'
  })

  const { title, body } = data

  return (
    <div>
       <h1>{title}</h1>
      <div className="grid gap-4">
        {body.map((item, i) =>
          item.fieldId === 'content' ? (
            <RichEditor key={i} content={item.richEditor} />
          ) : item.fieldId === 'imageCenter' ? (
            <ImageCenter key={i} image={item.image} />
          ) : item.fieldId === 'imageRight' ? (
            <ImageRight key={i} image={item.image} />
          ) : null
        )}
      </div>
    </div>
  )
}

/* 中央寄せの画像を返却するコンポーネント */
function ImageCenter({ image }) {
  return (
    <figure className="m-auto">
      <Image src={image.url} width={image.width} height={image.height} alt="" />
    </figure>
  )
}

/* 右寄せの画像を返却するコンポーネント */
function ImageRight({ image }) {
  return (
    <figure className="ml-auto">
      <Image src={image.url} width={image.width} height={image.height} alt="" />
    </figure>
  )
}


function RichEditor({ content }) {
  return <div dangerouslySetInnerHTML= />
}

このように、繰り返しフィールドとカスタムフィールドを利用し、fieldIdの値に応じてコンポーネントを切り替えることで、画像の配置を調整できます。