リッチエディタの操作方法
ここではリッチエディタの操作方法を解説します。
Information
こちらは2023年5月31日にリリースされた、新しいリッチエディタについてのドキュメントです。
旧リッチエディタの操作方法については「旧リッチエディタの操作方法」をご覧ください。
旧リッチエディタとの機能比較については「新リッチエディタと旧リッチエディタの違い」をご参照ください。
リッチエディタについて
リッチエディタは装飾付きのテキストを入力できるエディタです。
見出し、太字、リンクや画像の挿入まで、自由度高くコンテンツを作成できます。作成したコンテンツはHTMLとしてAPIで取得できます。
リッチエディタはWYSIWYGエディタとも呼ばれ、他のCMSやツールでもよく利用されています。基本的な操作感は似ているため、慣れている方であればすぐに使いこなすことができます。
以下では、リッチエディタの各機能を詳しく説明します。その機能を利用した場合のHTMLレスポンスも合わせて紹介します。
Information
- リッチエディタのご利用にあたっては、管理画面にて直接文字を入力していただくことを想定しております。Wordで作成した文章やHTMLデータを貼り付ける際は、入稿形式は一定程度は維持されるものの、入稿内容が全て正しく保存されることは保証しておりませんので、ご了承ください。
見出し、段落
h1〜h5、pタグに対応しています。
h1〜h5にはテキストをハッシュ化した文字列がidとして割り振られます。(つまり、テキストを変更しない限りidは固定となります)
<h1 id="h634aaf8fde">見出し1</h1>
割り振られたidを用いて、フロントエンド側で目次を生成することが可能です。
詳細については下記の記事をご覧ください。

- microCMSで目次を作成する
- https://blog.microcms.io/create-table-of-contents/
改行と段落
エディタ上でEnterを押すと次の段落になります。
Shift + Enterを押すと改行が挿入されます。
// 段落
<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>
テキスト寄せ
左揃え / 中央揃え / 右揃え の指定ができます。
左揃え(デフォルト)
<p>左揃えのテキスト</p>
中央揃え
<p style="text-align: center">中央揃えのテキスト</p>
右揃え
<p style="text-align: right">右揃えのテキスト</p>
区切り線
hrタグが入力されます。
<hr>
引用
テキストがblockquoteタグで囲われます。
<blockquote><p>引用されたテキスト</p></blockquote>
コードブロック
複数行にわたってソースコードを記述できます。
テキストがpreタグとcodeタグで囲われます。
ソースコードの入力に適しています。
<pre>
<code>const greeting = "Hello microCMS!";\nconsole.log(greeting);</code>
</pre>
コードブロックにはファイル名と言語を指定できます。
指定した場合は以下のようにレスポンスが変化します。
<div data-filename="greeting.js">
<pre>
<code class="language-javascript">const greeting = "Hello microCMS!";\nconsole.log(greeting);</code>
</pre>
</div>
テーブル
表を挿入できます。
セルの追加はもちろん、セルを結合・分割したり、最初の行をヘッダーにしたりできます。
<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>
Information
- ネストが深い構造となった場合、データベースの保存の制約上、エラーが発生する可能性があります。構造によって、設定可能なネストの数は異なりますので、ご不明な点がございましたら右下のチャット欄よりお問い合わせください。
Information
- ネストが深い構造となった場合、データベースの保存の制約上、エラーが発生する可能性があります。構造によって、設定可能なネストの数は異なりますので、ご不明な点がございましたら右下のチャット欄よりお問い合わせください。
リンク
リンクを指定することができます。
<p><a href="https://microcms.io">ここにリンク</a></p>
オプションで別タブで開くように指定できます。
<p><a href="https://microcms.io/pricing/" target="_blank" rel="noopener noreferrer nofollow">microCMSの料金ページ</a></p>
画像
画像を指定できます。
<figure>
<img src="https://images.microcms-assets.io/assets/service/test/file.png"
alt="" width="1200" height="630" />
</figure>
リッチエディタ内に入力された画像をクリックすることで、画像の width / height / alt / caption 、そしてリンクを指定することができます。
画像にリンクを指定した場合
<figure>
<a href="https://example.com">
<img src="https://images.microcms-assets.io/assets/service/test/file.png" alt="" width="1200" height="630" />
</a>
</figure>
画像にキャプションを設定した場合
<figure>
<img src="https://images.microcms-assets.io/assets/service/test/file.png" alt="" width="1200" height="630" />
<figcaption>caption</figcaption>
</figure>
カスタムclass
テキストに任意のclassを適用できる機能です。
適用したclassはフロントエンド側の実装でスタイルを当てるなど、自由に活用できます。
<p><span class="highlight">ハイライトされたテキスト</span></p>
カスタムclassは詳細設定で定義したものから選んで適用できされます。
埋め込み編集
TwitterやYouTubeなど外部のサービスを埋め込みできます。
1,900種類の外部サービスに対応しています。個人のブログなどの一般的なサイトも埋め込めます。
<div style=\"left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.25%;\"><iframe src=\"https://www.youtube.com/embed/omKyoU5Ia04?rel=0\" style=\"top: 0; left: 0; width: 100%; height: 100%; position: absolute; border: 0;\" allowfullscreen scrolling=\"no\" allow=\"accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share;\"></iframe></div>
(上記はYouTube埋め込みの例)
書式のクリア
選択範囲に対してスタイルやHTMLタグ情報をリセットすることができます。
Undo / Redo
処理を一つ前に戻す、または進められます。
マークダウン記法
リッチエディタ内ではマークダウン記法も可能です。
下記の記法に対応しております。
# 見出し
**太字**
*斜体*
~~打ち消し線~~
- リスト
1. 番号付きリスト
> 引用
`コード`
```コードブロック```
ショートカットキー
リッチエディタ内では下記のショートカットキーをご利用可能です。
※ただし、環境によっては動作しない場合もございます。
esc → 全画面解除
⌘ (Ctrl) + S → 下書き保存
⌘ (Ctrl) + Shift + S → 公開
⌘ (Ctrl) + Alt + 1-5 → 見出し1-5
⌘ (Ctrl) + B → 太字
⌘ (Ctrl) + I → 斜体
⌘ (Ctrl) + U → 下線
⌘ (Ctrl) + Shift + X → 打ち消し線
⌘ (Ctrl) + E → コード
⌘ (Ctrl) + Shift + E → 中央寄せ
⌘ (Ctrl) + Shift + R → 右寄せ
⌘ (Ctrl) + Shift + B → 引用
⌘ (Ctrl) + Alt + C → コードブロック
⌘ (Ctrl) + Shift + 8 → リスト
⌘ (Ctrl) + Shift + 7 → 番号付きリスト
⌘ (Ctrl) + Z → Undo
⌘ (Ctrl) + Shift + Z → Redo
新リッチエディタのエディタ部分はTiptapを利用しています。Tiptapのキーボードショートカットも合わせてご覧ください。
ツールバーの編集
リッチエディタの装飾ボタンをカスタマイズすることができます。APIスキーマのリッチエディタから、詳細設定
をクリックするとサイドメニューが開くので、ツールバーの編集
からカスタマイズできます。
Webサイト側で考慮している装飾にだけに絞るなど、便利にお使いいただけます。
リッチエディタと旧リッチエディタの違い
新しいリッチエディタでできるようなったこと
- テーブルの挿入
- 区切り線の挿入
- カスタムclassの設定
- コードブロックでの言語・ファイル名の指定
- リンクの「別のタブで開く」オプションの設定
- Enterで段落分け(pタグ) / Shift + Enter で改行(brタグ)
- 画像キャプションの追加
- 埋め込み編集
- WRITE APIを用いたHTML文字列での入稿
新しいリッチエディタでできなくなったこと
- オブジェクト形式でのレスポンス(
richEditorFormat
)
→ 開発を検討しています
- 文字色の設定
- 文字サイズの設定
- 背景色の設定
- インデントの設定
- 上付き文字、下付き文字の設定
→カスタムclassを利用することで、同等の機能を実現することを想定しています
Information
カスタムclass機能での代替にあたっては、スタイルの情報をCMSの外に持つことによって、管理を容易にすることや、スタイルに統一性を持たすことを目的としています。
旧リッチエディタからリッチエディタへの移行方法
旧リッチエディタとは内部的なデータ構造が異なる理由で、別のフィールドとして扱われます。そのため旧リッチエディタからの切り替えにあたっては、手動での移行が必要となります。
旧リッチエディタからリッチエディタへのコンテンツの移行は、リッチエディタのWRITE APIをお使いいただくことで対応が可能です。
WRITE APIの詳細については、下記のドキュメントをご確認ください。
リッチエディタのWRITE API|microCMSドキュメント