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

基本ルール

• リクエストに渡す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>

文字サイズ

現在は未対応です。

テキスト寄せ

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>

番号付きリスト

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

<ol>
  <li>アカウント登録</li>
  <li>サービス登録</li>
  <li>APIを作成する</li>
</ol>

リンク

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' />

画像の横位置

figure タグのstyle 属性にtext-align を指定することで、画像の左揃え / 中央揃え / 右揃え の指定ができます。

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

ファイル

aタグ内のhrefにURLを指定し、data-embed-type="file"を指定した場合、ファイルとしてパースされます。

<p><a data-embed-type='file' href='https://files.microcms-assets.io/assets/service/test/file.pdf'>file.pdf</a></p>

hrefの値はmicroCMSのファイルドメインのみ有効で、外部URLは非対応となります。また、下記の場合はテキストとしてパースされます。

• ファイルのURLが正しくない場合
• 別サービスのファイルを指定した場合 (サービスIDが一致しない場合)
• data-embed-typeにfile以外を指定した場合

また、下記の場合は通常のaタグとしてパースされます。

• data-embed-type を指定しなかった場合

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

<p><a data-embed-type='file' href='https://files.example.com/assets/service/test/file.pdf'>file.pdf</a></p>

カスタムclass

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

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

埋め込み編集

現在は未対応です。

ツールバーの編集

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

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

HTMLの解析に失敗した場合

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