microCMS

新リッチエディタの正式版をリリースしました

りゅーそう

この記事は公開後、1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

プロダクトエンジニアのりゅーそうです。
現在パブリックベータ版として開発を進めていた新リッチエディタの「正式版」をリリースしました。

新リッチエディタの機能

新リッチエディタは、現行のエディタに加え

  • テーブル
  • カスタムclassの設定
  • コードブロックでの言語・ファイル名の指定
  • リンクの「別のタブで開く」オプションの設定
  • Enterで段落分け(pタグ) / Shift + Enter で改行(brタグ)
  • 画像キャプションの追加
  • 埋め込みプレビュー

などの機能を追加しました。それぞれ紹介します。

テーブルの挿入・編集

新リッチエディタでは、テーブルを挿入・編集できます。
テーブルを挿入するには、テーブルアイコンをクリックして、挿入したい列数・行数を選択します。
リッチエディタのテーブルを挿入している
上記の例ですと、4*4のテーブルが挿入されます(画面幅におさまらない場合は横スクロールで表示されます)。テーブル内では文章はもちろんですが、リストや画像など様々な形式のコンテンツを挿入できます。
リッチエディタにテーブルが挿入されている画像
テーブルの編集をする場合は、テーブルにカーソルが当たった状態でテーブルアイコンを再度クリックします。
テーブルの編集メニューが開いている画像
以下の操作ができます。カーソルが当たっているセルを基準に編集されます。

  • 列を右に追加
  • 列を左に追加
  • 行を上に追加
  • 行を下に追加
  • 列を削除
  • 行を削除
  • テーブルを削除
  • セルを結合
  • セルを分割
  • 最初の行をヘッダーにする
  • 最初の列をヘッダーにする


カスタムclass

カスタムclassは文章に任意のクラスを付与できる機能です。
APIスキーマ設定画面で登録したカスタムclassを設定することで、文章にカスタムclassが適用されます。
文章を選択して、設定したカスタムクラスをクリックして、カスタムクラスが文章に反映されている
カスタムクラスはAPIスキーマ設定の詳細設定で追加・管理することができます。
APIスキーマ設定のカスタムclass設定画面のスクショ
カスタムclassによって、

  • 開発者はどのような装飾がされるのか想定した実装
  • コンテンツ編集者は以前ではできなかった自由な表現

ができるようになるかと思います。

またカスタムclassに関連して、新リッチエディタでは旧リッチエディタから以下のメニューがなくなっています。

  • 文字色、背景色
  • 文字サイズ

これらはカスタムclassを利用して同様のことを実現できます。

コードブロックでの言語・ファイル名の指定

コードブロックで言語・ファイル名の指定ができるようになりました。
コードブロックがリッチエディタに挿入されているスクショ
「言語」の指定はインクリメンタルに検索→選択ができます。
言語入力のテキストエリア

リンクの「別のタブで開く」オプションの設定

リンクを「別タブで開く」設定を選択できるようになりました。
リンク設定メニュー

Enterで段落分け(pタグ) / Shift + Enter で改行(brタグ)

改行をpタグ、またはbrタグで行うかを制御できるようになりました。
新リッチエディタ上では、以下のように見た目が変わります。

  • 「Enter」→ pタグが挿入される。リッチエディタ上では行間が空いて表現される
  • 「Shift + Enter」→ brタグが挿入される。リッチエディタ上では行間なしで表現される

リッチエディタのテキスト改行の比較

画像キャプションの追加

従来のAltなどの設定に加えて、画像にキャプションを設定できるようになりました。
画像設定画面のスクショ
新リッチエディタ上では以下のように表示されます。
リッチエディタに挿入された画像のスクショ。キャプションが設定されている

埋め込みプレビュー

こちらは正式版公開に合わせて追加された機能です。
旧リッチエディタの埋め込み機能を刷新しました。
対応プロバイダーが増え、1,900種類以上の外部サービスに対応しています。以下のような機能があります。

  • エディタ上でも埋め込みプレビューが可能
  • 様々なパラメータを追加可能
  • 通常のリンクをカード形式で表示

エディタ上でも埋め込みプレビューが可能に

ツールバーの「埋め込み」のアイコンをクリックすると「埋め込み追加」のメニューが開きます。
埋め込みたいURLを入力して、「プレビュー」を押すと、画面上で埋め込みがプレビューできます。
埋め込み追加のモーダル。twitterのURLを入力し、ツイートのプレビューが表示されている
さらに「追加する」をクリックすると、エディタ上でもプレビューが表示されます。
ツイートがリッチエディタ上でプレビューされている

様々なパラメータを追加可能

先ほどの埋め込み追加画面or編集画面でパラメータを編集できます。
以下はTwitterの「Dark Theme」を適用した例になります(編集できるパラメータは埋め込みプロバイダーによって異なります)。
ツイッタープレビューでダークテーマを適用して、プレビューにダークモードが適用されている

通常のリンクをカード形式で表示

通常のリンクもカード形式で表示できます。
(※ただし、埋め込み元のリンクにOGP設定などがされている場合に限ります)
以下はmicroCMSサービスサイトのトップページを埋め込んだ例です。
microCMSのサイトがリッチエディタ上でプレビューされている
リンクプレビューのスタイルをカスタマイズすることは想定しておりません。
自由にカスタマイズしたい場合は従来通り、繰り返しフィールドのご利用もご検討ください。

旧エディタから追加された新リッチエディタの機能の紹介は以上となります。
その他にも入稿体験の向上のために様々な工夫をしています。ぜひお試しください。

詳細な仕様やHTMLレスポンスはドキュメントをご覧ください。
https://document.microcms.io/manual/rich-editor-usage

新リッチエディタ こだわりポイント

新リッチエディタではシンプルさを保ちつつ、旧リッチエディタでは手の届かなかったところも自由に編集できるように改善しました。
ぜひお試しください。
また新リッチエディタの特徴については以下の資料もぜひご覧ください。


こちらの資料にある通り、今回の新リッチエディタでは単に機能を追加するだけではなく、
装飾の自由度が高く調整が難しいリッチエディタにおいて、「開発者」と「コンテンツ編集者」の連携が取りやすいシンプルな設計となるようにデザインされています。

また、新リッチエディタではキーボード操作でも編集ができる範囲が大幅に広がりました
例えば画像編集では、画像の行にカーソルが当たった状態で右矢印キーをクリックすると、フォーカスが当たるようになりました。
その状態でEnterキーを押すと画像設定のメニューが開いてそのまま画像のパラメータを編集できます。
リッチエディタに挿入されている画像上でEnterキーを押してて画像の編集メニューが開いている様子。
このように各フィールドでキーボードでもアクセスできるような改善をしました。

新リッチエディタの設定方法

APIスキーマ設定で「リッチエディタ」を選択するとご利用いただけます。

旧リッチエディタの取り扱い

今回の新リッチエディタ正式リリースに伴い、これ以降リッチエディタ関連の表記を以下のように統一します。

  • 新リッチエディタ→リッチエディタ
  • 既存のリッチエディタ→旧リッチエディタ


新リッチエディタは旧リッチエディタから移行されるものではなく、新しいフィールドの種類です。
新しくフィールドを作成する際には、新しいリッチエディタを推奨します

旧リッチエディタも引き続きご利用いただけますが、新規の機能追加は致しません。
旧リッチエディタから新しいリッチエディタへのマイグレーション機能の提供を予定しています(時期未定)。

イベントのお知らせ

5/31(水)にmicroCMS Online Meetup 2023を開催します!
この記事では紹介しきれなかった機能や新リッチエディタの活用方法などを紹介します。このイベントをチェックすれば、新リッチエディタの新機能・操作方法などすべて理解できる内容になる予定です。
ぜひ、参加登録よろしくお願いします!
https://microcms.connpass.com/event/283625/
microCMS Online Meetup 2023


まずは、無料で試してみましょう。

APIベースの日本製ヘッドレスCMS「microCMS」を使えば、 ものの数分でAPIの作成ができます。

microCMSを無料で始める

microCMSについてお問い合わせ

初期費用無料・14日間の無料トライアル付き。ご不明な点はお気軽にお問い合わせください。

お問い合わせ

microCMS公式アカウント

microCMSは各公式アカウントで最新情報をお届けしています。
フォローよろしくお願いします。

  • X
  • Discord
  • github

ABOUT ME

りゅーそう
1994年生まれ。 前職は高校地理歴史科教員。2021/9〜microCMS入社。React/TypeScriptが好きです。