テキストエリア

テキストエリアは、複数行のテキストや長文を入力するためのフィールドです。
商品説明やサービス紹介文、備考欄など、改行を含む文章をシンプルに管理したい場合に適しています。

データの入稿方法

• テキストエリアをクリックして、テキストを入力します。
• 改行する場合はEnterキーを押します。

補足

• テキストエリアの右下には入力されている文字数が表示されます。改行は1文字としてカウントされます。
• テキストエリアの右下にあるドラッグハンドルを上下方向に操作することで、入力欄の高さを調整できます。

API、CSVを利用した入稿については以下のドキュメントをご参照ください。

詳細設定

GET APIのレスポンス形式

詳細は以下のドキュメントをご参照ください。

フロントエンドでの利用方法

テキストエリアは文字列として返されるため、HTMLの要素に直接指定できます。
テキストエリアの改行は内部的には\nとして扱われます。HTMLにそのまま出力する場合は改行が反映されないため、表示時には以下のような方法で改行を反映させる必要があります。

• \n を <br>要素へ置換する
• CSSでwhite-space: pre-wrapを使用して改行を反映させる

以下はNext.jsの実装例です。

export default async function Page({ params }) {
  const { slug } = await params;

  // microCMS JavaScript SDK（https://github.com/microcmsio/microcms-js-sdk）を使用してデータを取得
  const data = await client.getListDetail({
    endpoint: "blog",
    contentId: slug,
  });

  return (
    <main>
      {/* 
      textareaはフィールドIDです。実際のフィールドIDに置き換えてください
      改行を反映させるために、`white-space: "pre-wrap"` スタイルを適用しています。
      */}
      <p style={{ whiteSpace: "pre-wrap" }}>{data.textarea}</p>
    </main>
  );
}