microCMS

チュートリアル
操作マニュアル
コンテンツAPI
マネジメントAPI（ベータ）
画像API

リッチエディタのWRITE API

最終更新日:2024年10月23日

リッチエディタではWRITE APIを用いて、HTML文字列で入稿することができます。例えば旧リッチエディタからの移行や、他CMSからの移行にご活用できます。

informationInformation
  • リッチエディタにて対応しているHTMLの範囲のみ入稿することが可能です。すべてのHTMLの記法に対応しているわけではないため、ご注意ください。
  • 旧リッチエディタではHTML文字列での入稿に対応していません。

基本ルール

  • リクエストに渡すHTML文字列は、ダブルクォーテーションのエスケープ(\")もしくはシングルクォーテーション(')への置換が必要となります。
  • 表示の都合上、当ドキュメントでは改行を含めてHTMLを表示していますが、実際のリクエストには改行を含めないでください。

見出し、段落

h1〜h5、pタグに対応しています。ハッシュ化したidの指定はパース時に適用されませんが、APIのレスポンスには含まれます。

<h1>見出し1</h1>

改行と段落

テキストの中にbrタグがある場合、改行としてパースされます。

// 段落
<p>Enterを押すと</p>
<p>次の段落になります。</p>

// 改行
<p>Shift + Enterを押すと<br>改行になります。</p>

太字

strongタグの場合、太字としてパースされます。

<strong>太字になるテキスト</strong>

斜体

emタグの場合、斜体としてパースされます。

<em>斜体になるテキスト</em>

下線

uタグの場合、下線としてパースされます。

<u>下線がひかれるテキスト</u>

打ち消し線

sタグの場合、打ち消し線としてパースされます。

<s>打ち消し線が入るテキスト</s>

コード

codeタグの場合、コードとしてパースされます。

<code>console.log('Hello microCMS!')</code>

文字色

spanタグのstyle属性にcolorプロパティを指定することで、文字色としてパースされます。

<span style='color: #ff0000'>文字色</span>
informationInformation

カラーコードの指定は、HEX形式の他に、RGB形式やRGBA形式にも対応しています。ただし、いずれの指定方式の場合でも、レスポンスのHTMLにはHEX形式が用いられます。

テキスト寄せ

styleにtext-alignを指定することによって、左揃え / 中央揃え / 右揃え の指定ができます。

左揃え（デフォルト）

<p>左揃えのテキスト</p>

中央揃え

<p style='text-align:center'>中央揃えのテキスト</p>

右揃え

<p style='text-align: right'>右揃えのテキスト</p>

区切り線

hrタグの場合、区切り線としてパースされます。

<hr>

引用

blockquoteタグの場合、引用としてパースされます。

<blockquote>引用されたテキスト</blockquote>

コードブロック

preタグの中にcodeタグを指定した場合、コードブロックとしてパースされます。

<pre>
  <code>const greeting = 'Hello microCMS!';\nconsole.log(greeting);</code>
</pre>

コードブロックにはファイル名と言語を指定できます。divタグのdata-filenameの値を指定すると、ファイル名としてパースされます。また、codeタグのclassに値を指定することで、言語としてパースされます。

<div data-filename='greeting.js'>
  <pre>
    <code class='language-javascript'>const greeting = 'Hello microCMS!'; console.log(greeting);</code>
  </pre>
</div>

テーブル

tableタグ > tbodyタグ > trタグ > thタグ or tdタグの構造を作ることで、テーブルとしてパースすることができます。最初の行または列をヘッダーにしたい場合はthタグにします。また、セルの結合としてパースしたい場合は、colspanとrowspanの値を指定してください。

<table>
  <tbody>
    <tr>
      <th colspan='1' rowspan='1'>
        <p>Company</p>
      </th>
      <th colspan='1' rowspan='1'>
        <p>Location</p>
      </th>
    </tr>
    <tr>
      <td colspan='1' rowspan='1'>
        <p>microCMS</p>
      </td>
      <td colspan='1' rowspan='1'>
        <p>Tokyo</p>
      </td>
    </tr>
  </tbody>
</table>

リスト

ulタグの中にliタグを指定した場合、リストとしてパースされます。

<ul>
  <li>りんご</li>
  <li>みかん</li>
</ul>

ネストした構造でもパースすることができます。

<ul>
  <li>日本
    <ul>
      <li>東京都</li>
      <li>大阪府</li>
      <li>埼玉県</li>
    </ul>
  </li>
  <li>アメリカ</li>
</ul>
informationInformation
  • ネストが深い構造となった場合、データベースの保存の制約上、エラーが発生する可能性があります。構造によって、設定可能なネストの数は異なりますので、ご不明な点がございましたら右下のチャット欄よりお問い合わせください。

番号付きリスト

olタグの中にliタグを指定した場合、番号付きリストとしてパースされます。

<ol>
  <li>アカウント登録</li>
  <li>サービス登録</li>
  <li>APIを作成する</li>
</ol>
informationInformation
  • ネストが深い構造となった場合、データベースの保存の制約上、エラーが発生する可能性があります。構造によって、設定可能なネストの数は異なりますので、ご不明な点がございましたら右下のチャット欄よりお問い合わせください。

リンク

aタグ内のhrefにURLを指定した場合、リンクとしてパースされます。

<p><a href='https://microcms.io'>ここにリンク</a></p>

aタグ内にtarget='_blank'を指定することで、別タブで開く設定としてパースすることができます。relの値はパース時には適用されませんがAPIのレスポンスには含まれます。

<p><a href='https://microcms.io/pricing/' target='_blank'>microCMSの料金ページ</a></p>

画像

imgタグ内にsrcが指定されている場合、画像としてパースされます。srcの値はmicroCMSの画像ドメインのみ有効になっていて、外部URLは未対応となります。また、画像のURLが正しくない場合や、別サービスの画像を指定した場合 (サービスIDが一致しない場合) はパースされません。

値が設定されていない場合、altは ""（空文字）、width と height は画像のオリジナルサイズが指定されます。

<img src='https://images.microcms-assets.io/assets/service/test/file.png'
        alt='' width='1200' height='630' />

aタグ内にimgタグを指定した場合、リンクの画像としてパースされます。

<a href='https://example.com'>
    <img src='https://images.microcms-assets.io/assets/service/test/file.png\' alt='' width='1200' height='630' />
 </a>

srcのURLにwとhのクエリストリングに値を指定すると、カスタムWidth、カスタムHeightとしてパースされます。wとhを両方指定しないとパースは適用されません。

<img src='https://images.microcms-assets.io/assets/service/test/file.png?w=1200&h=630'
        alt='' width='1200' height='630' />

figureタグの場合でも上記挙動は変わりません。ただし、figcaptionを指定したい場合は、figureタグを指定する必要があります。

<figure>
  <img src='https://images.microcms-assets.io/assets/service/test/file.png'alt='' width='1200' height='630' />
  <figcaption>caption</figcaption>
</figure>

メディアのカスタムドメインが設定されているサービスの場合、設定されているドメインの画像を指定することができます。

<img src='https://images.example.com/assets/service/test/file.png' alt='' width='1200' height='630' />
tipsTips

srcに外部URLの画像を指定する場合の方法については、ヘルプ記事「WRITE APIでリッチエディタにコンテンツを登録する際、imgタグ内で外部URLの画像を指定する方法は？」をご覧ください。

カスタムclass

spanタグ内のclassに値を指定した場合、カスタムclassとしてパースされます。カスタムclassが設定されていない場合は、単純なpタグのテキストとしてパースされます。

<p><span class='highlight'>ハイライトされたテキスト</span></p>

埋め込み編集

WRITE APIでは埋め込みに対応していません。

ツールバーの編集

リッチエディタでは装飾ボタンをカスタマイズすることができます。装飾ボタンがオフになっている場合パースは適用されません。例えば、太字がオフになっている場合strongタグはパースされず、単純なpタグのテキストになります。

<p>太字になるテキスト</p>

HTMLの解析に失敗した場合

該当の箇所は、基本的に段落のテキスト（pタグ）としてパースされます。
またリクエストの内容によっては、500番台のステータスコードにてレスポンスが返却され、データ登録に失敗するケースがあります。

目次