プロダクトエンジニアのりゅーそうです。
現在パブリックベータ版として開発を進めていた新リッチエディタの「正式版」をリリースしました。
新リッチエディタの機能
新リッチエディタは、現行のエディタに加え
- テーブル
- カスタムclassの設定
- コードブロックでの言語・ファイル名の指定
- リンクの「別のタブで開く」オプションの設定
- Enterで段落分け（pタグ） / Shift + Enter で改行（brタグ）
- 画像キャプションの追加
- 埋め込みプレビュー
などの機能を追加しました。それぞれ紹介します。
テーブルの挿入・編集
新リッチエディタでは、テーブルを挿入・編集できます。
テーブルを挿入するには、テーブルアイコンをクリックして、挿入したい列数・行数を選択します。
上記の例ですと、4*4のテーブルが挿入されます（画面幅におさまらない場合は横スクロールで表示されます）。テーブル内では文章はもちろんですが、リストや画像など様々な形式のコンテンツを挿入できます。
テーブルの編集をする場合は、テーブルにカーソルが当たった状態でテーブルアイコンを再度クリックします。
以下の操作ができます。カーソルが当たっているセルを基準に編集されます。
- 列を右に追加
- 列を左に追加
- 行を上に追加
- 行を下に追加
- 列を削除
- 行を削除
- テーブルを削除
- セルを結合
- セルを分割
- 最初の行をヘッダーにする
- 最初の列をヘッダーにする
カスタムclass
カスタムclassは文章に任意のクラスを付与できる機能です。
APIスキーマ設定画面で登録したカスタムclassを設定することで、文章にカスタムclassが適用されます。
カスタムクラスはAPIスキーマ設定の詳細設定で追加・管理することができます。
カスタムclassによって、
- 開発者はどのような装飾がされるのか想定した実装
- コンテンツ編集者は以前ではできなかった自由な表現
ができるようになるかと思います。
またカスタムclassに関連して、新リッチエディタでは旧リッチエディタから以下のメニューがなくなっています。
- 文字色、背景色
- 文字サイズ
これらはカスタムclassを利用して同様のことを実現できます。
コードブロックでの言語・ファイル名の指定
コードブロックで言語・ファイル名の指定ができるようになりました。
「言語」の指定はインクリメンタルに検索→選択ができます。
リンクの「別のタブで開く」オプションの設定
リンクを「別タブで開く」設定を選択できるようになりました。
Enterで段落分け（pタグ） / Shift + Enter で改行（brタグ）
改行をpタグ、またはbrタグで行うかを制御できるようになりました。
新リッチエディタ上では、以下のように見た目が変わります。
- 「Enter」→ pタグが挿入される。リッチエディタ上では行間が空いて表現される
- 「Shift + Enter」→ brタグが挿入される。リッチエディタ上では行間なしで表現される
画像キャプションの追加
従来のAltなどの設定に加えて、画像にキャプションを設定できるようになりました。
新リッチエディタ上では以下のように表示されます。
埋め込みプレビュー
こちらは正式版公開に合わせて追加された機能です。
旧リッチエディタの埋め込み機能を刷新しました。
対応プロバイダーが増え、1,900種類以上の外部サービスに対応しています。以下のような機能があります。
- エディタ上でも埋め込みプレビューが可能
- 様々なパラメータを追加可能
- 通常のリンクをカード形式で表示
エディタ上でも埋め込みプレビューが可能に
ツールバーの「埋め込み」のアイコンをクリックすると「埋め込み追加」のメニューが開きます。
埋め込みたいURLを入力して、「プレビュー」を押すと、画面上で埋め込みがプレビューできます。
さらに「追加する」をクリックすると、エディタ上でもプレビューが表示されます。
様々なパラメータを追加可能
先ほどの埋め込み追加画面or編集画面でパラメータを編集できます。
以下はTwitterの「Dark Theme」を適用した例になります（編集できるパラメータは埋め込みプロバイダーによって異なります）。
通常のリンクをカード形式で表示
通常のリンクもカード形式で表示できます。
（※ただし、埋め込み元のリンクにOGP設定などがされている場合に限ります）
以下はmicroCMSサービスサイトのトップページを埋め込んだ例です。
リンクプレビューのスタイルをカスタマイズすることは想定しておりません。
自由にカスタマイズしたい場合は従来通り、繰り返しフィールドのご利用もご検討ください。
旧エディタから追加された新リッチエディタの機能の紹介は以上となります。
その他にも入稿体験の向上のために様々な工夫をしています。ぜひお試しください。
詳細な仕様やHTMLレスポンスはドキュメントをご覧ください。
https://document.microcms.io/manual/rich-editor-usage
新リッチエディタ こだわりポイント
新リッチエディタではシンプルさを保ちつつ、旧リッチエディタでは手の届かなかったところも自由に編集できるように改善しました。
ぜひお試しください。
また新リッチエディタの特徴については以下の資料もぜひご覧ください。
こちらの資料にある通り、今回の新リッチエディタでは単に機能を追加するだけではなく、
装飾の自由度が高く調整が難しいリッチエディタにおいて、「開発者」と「コンテンツ編集者」の連携が取りやすいシンプルな設計となるようにデザインされています。
また、新リッチエディタではキーボード操作でも編集ができる範囲が大幅に広がりました。
例えば画像編集では、画像の行にカーソルが当たった状態で右矢印キーをクリックすると、フォーカスが当たるようになりました。
その状態でEnterキーを押すと画像設定のメニューが開いてそのまま画像のパラメータを編集できます。
このように各フィールドでキーボードでもアクセスできるような改善をしました。
新リッチエディタの設定方法
APIスキーマ設定で「リッチエディタ」を選択するとご利用いただけます。
旧リッチエディタの取り扱い
今回の新リッチエディタ正式リリースに伴い、これ以降リッチエディタ関連の表記を以下のように統一します。
- 新リッチエディタ→リッチエディタ
- 既存のリッチエディタ→旧リッチエディタ
新リッチエディタは旧リッチエディタから移行されるものではなく、新しいフィールドの種類です。
新しくフィールドを作成する際には、新しいリッチエディタを推奨します。
旧リッチエディタも引き続きご利用いただけますが、新規の機能追加は致しません。
旧リッチエディタから新しいリッチエディタへのマイグレーション機能の提供を予定しています（時期未定）。
イベントのお知らせ
5/31（水）にmicroCMS Online Meetup 2023を開催します！
この記事では紹介しきれなかった機能や新リッチエディタの活用方法などを紹介します。このイベントをチェックすれば、新リッチエディタの新機能・操作方法などすべて理解できる内容になる予定です。
ぜひ、参加登録よろしくお願いします！
https://microcms.connpass.com/event/283625/
