Quick Edit
コンテンツを別のページに遷移することなく、表示されている場所でそのまま編集できるインプレース編集機能を提供するモジュールです。
quickedit
インストール
composer require 'drupal/quickedit:^2.0'
composer require 'drupal/quickedit:^1.0'
概要
Quick Editモジュールは、Drupalのコンテンツをインプレース（その場で）編集する機能を提供します。従来はコンテンツを編集するために別の編集ページに移動する必要がありましたが、このモジュールを使用すると、フロントエンドのページ上で直接フィールドを編集できます。
このモジュールはDrupal 8/9コアに含まれていたQuick Edit機能の後継となるcontribモジュールです。Drupal 10.2以降ではコアから削除されたため、この機能を継続して利用するにはこのモジュールをインストールする必要があります。
技術的には、フィールドとエンティティにCSSクラスとdata-属性を追加することで、インプレース編集を可能にします。Contextual Linksモジュールと連携して、「Quick edit」リンクをコンテキストメニューに表示します。
4種類のインプレースエディターを提供しています：フォームエディター（すべてのフィールドタイプに対応）、プレーンテキストエディター（単一値のテキストフィールド用）、リッチテキストエディター（WYSIWYGエディター対応のフォーマット済みテキスト用）、画像エディター（ドラッグ＆ドロップによる画像アップロード用）。
Features
- フロントエンドページでのインプレースコンテンツ編集機能 - 編集ページに移動することなく、表示されている場所でフィールドを直接編集可能
- 複数のインプレースエディター対応 - フォームベース、プレーンテキスト、WYSIWYGリッチテキスト、画像ドラッグ＆ドロップの4種類
- Contextual Linksとの統合 - コンテキストリンクメニューから「Quick edit」を選択してインプレース編集モードを開始
- Layout Builder対応 - Layout Builderで配置されたフィールドブロックもインプレース編集可能
- CKEditor 5との統合 - リッチテキストフィールドをCKEditor 5を使用してインライン編集
- PrivateTempStoreによる一時保存 - 変更内容を一時的に保存し、最終的に保存または破棄を選択可能
- フィールドタイプごとの最適なエディター自動選択 - フィールドのフォーマッター設定に基づいて適切なエディターを選択
- 複数言語対応 - 多言語サイトでの翻訳コンテンツのインプレース編集をサポート
- リアルタイムバリデーション - 保存時にバリデーションエラーをインラインで表示
Use Cases
記事コンテンツの迅速な修正
サイト管理者やコンテンツ編集者が公開済みの記事でタイプミスを発見した場合、編集ページに移動することなく、フロントエンドページで直接テキストを修正できます。記事を表示している状態で、Contextual Linksの鉛筆アイコンをクリックし、「Quick edit」を選択するだけで、その場で編集モードに入れます。
画像の差し替え
記事やページに掲載している画像を差し替える場合、画像フィールドをクリックするとドロップゾーンが表示され、新しい画像をドラッグ＆ドロップするだけで簡単に差し替えられます。alt属性やtitle属性もその場で編集可能です。
複数言語コンテンツの翻訳修正
多言語サイトで翻訳コンテンツを確認しながら修正する場合、各言語版のページを表示した状態で直接テキストを編集できます。言語切り替えと編集ページへの移動を繰り返す必要がなく、効率的に翻訳作業を行えます。
WYSIWYGエディターを使用したリッチテキスト編集
本文フィールドなどのフォーマット済みテキストを編集する場合、CKEditor 5がインラインで起動し、太字、イタリック、リンクなどの書式設定を適用しながらその場で編集できます。
Layout Builderでのフィールド編集
Layout Builderを使用してレイアウトをカスタマイズしたページでも、配置されたフィールドブロックの内容をインプレースで編集できます。レイアウト編集モードに入らずにコンテンツだけを更新できます。
Tips
- パフォーマンスのため、Quick EditはフィールドメタデータをsessionStorageにキャッシュします。権限変更後は新しいブラウザセッションで確認してください。
- テーマでquickedit_stylesheets設定を使用することで、Quick Editツールバーの外観をカスタマイズできます。
- カスタムフィールドフォーマッターを作成する際は、quickeditアノテーションキーでどのエディターを使用するか指定できます。
- 複数値フィールドは'form'エディターのみ対応しています。'plain_text'や'image'エディターは単一値フィールドでのみ動作します。
- 編集中の変更はPrivateTempStoreに一時保存されるため、保存ボタンをクリックするまでデータベースには反映されません。
Technical Details
権限 1
Hooks 3
hook_quickedit_editor_alter
インプレースエディタープラグインのメタデータを変更するためのフック。エディタープラグインの発見後、キャッシュ前に呼び出されます。
hook_quickedit_render_field
非標準のレンダリングパイプライン（Views等）でレンダリングされたフィールドを再レンダリングするためのフック。インプレース編集後にフィールドを元の表示方法で再表示する必要がある場合に使用します。
hook_field_formatter_info_alter
フィールドフォーマッター情報を変更し、Quick Editで使用するエディターを指定できます。quickedit.editorキーで'form'、'plain_text'、'editor'、'image'、'disabled'を指定可能。
Troubleshooting 4
1. ユーザーに「Access in-place editing」と「Use contextual links」パーミッションが付与されているか確認してください。2. ツールバーの鉛筆アイコン（Edit）をクリックしてコンテキストリンクモードを有効にしてください。3. 管理画面ではなくフロントエンドページで確認してください（インプレース編集は管理画面では無効）。
1. そのフィールドの編集権限があるか確認してください。2. 計算フィールドやカスタムレンダリングのフィールドはインプレース編集に対応していない場合があります。3. フォーマッターのquickedit設定が'disabled'になっていないか確認してください。
1. CSRFトークンの問題の可能性があります。ページを再読み込みしてください。2. フィールドのバリデーションエラーがないか確認してください。エラーメッセージはフォーム内に表示されます。3. サーバーエラーの場合はDrupalのログ（/admin/reports/dblog）を確認してください。
1. Editorモジュールが有効になっているか確認してください。2. 該当するテキストフォーマットにエディターが設定されているか確認してください。3. そのエディターがインライン編集をサポートしているか確認してください（supports_inline_editing設定）。
Security Notes 3
- インプレース編集へのアクセスは、「Access in-place editing」パーミッションと該当フィールドの編集パーミッションの両方で制御されます。
- すべてのAJAXリクエストはCSRFトークンで保護されています。認証ユーザーにはトークン検証が行われ、匿名ユーザーにはカスタムヘッダーの存在確認が行われます。
- 画像アップロード時はフィールドに設定されたファイルバリデーター（ファイルサイズ、拡張子、画像サイズなど）が適用されます。