ここではリッチエディタの操作方法を解説します。

リッチエディタについて

リッチエディタは装飾付きのテキストを入力できるエディタです。
見出し、太字、リンクや画像の挿入まで、自由度高くコンテンツを作成できます。作成したコンテンツはHTMLとしてAPIで取得できます。



リッチエディタはWYSIWYGエディタとも呼ばれ、他のCMSやツールでもよく利用されています。基本的な操作感は似ているため、慣れている方であればすぐに使いこなすことができます。

以下では、リッチエディタの各機能を詳しく説明します。その機能を利用した場合のHTMLレスポンスも合わせて紹介します。

見出し、段落

h1〜h5、pタグに対応しています。
h1〜h5にはテキストをハッシュ化した文字列がidとして割り振られます。（つまり、テキストを変更しない限りidは固定となります）

<h1 id="h634aaf8fde">見出し1</h1>

割り振られたidを用いて、フロントエンド側で目次を生成することが可能です。
詳細については下記の記事をご覧ください。

改行と段落

エディタ上で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>

番号付きリスト

テキストがolタグ、liタグで囲われます。

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

リンク

リンクを指定することができます。

<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を利用することで、同等の機能を実現することを想定しています

旧リッチエディタからリッチエディタへの移行方法

旧リッチエディタとは内部的なデータ構造が異なる理由で、別のフィールドとして扱われます。そのため旧リッチエディタからの切り替えにあたっては、手動での移行が必要となります。

旧リッチエディタからリッチエディタへのコンテンツの移行は、リッチエディタのWRITE APIをお使いいただくことで対応が可能です。
WRITE APIの詳細については、下記のドキュメントをご確認ください。

リッチエディタのWRITE API｜microCMSドキュメント