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

リッチエディタについて

リッチエディタは装飾付きのテキストを入力できるエディタです。
見出し、太字、リンクや画像の挿入まで、自由度高くコンテンツを作成できます。作成したコンテンツは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タグ）
• 画像キャプションの追加
• 埋め込み編集

新しいリッチエディタでできなくなったこと

• オブジェクト形式でのレスポンス（richEditorFormat）→ 現在鋭意開発中です
• 文字色、背景色 → カスタムclassを利用して同様のことを実現できます