Frontend Editing
A lightweight module that enables editing entities directly in the frontend using a sidebar panel, without relying on core's Settings Tray, Contextual Links, or Quick Edit modules.
frontend_editing
インストール
composer require 'drupal/frontend_editing:^1.9'
概要
Frontend Editingは、DrupalサイトのフロントエンドからコンテンツEntityを直接編集するための合理化された方法を提供します。コアの組み込み編集ソリューションとは異なり、このモジュールはEntity編集フォームをiframeとして読み込むサイドバーパネルを使用し、フロントエンドとバックエンド編集の間で一貫した編集体験を確保します。
このモジュールは、有効化されたEntityタイプにアクションリンクを追加し、設定可能なサイドバーで編集フォームを開きます。Entityリファレンスフィールドをサポートし、アイテムの並び替え（上下移動）、新しい参照Entityの追加、既存の参照の削除などの機能をすべてページを離れることなくフロントエンドから実行できます。
このモジュールは専用のサブモジュール（Frontend Editing Paragraphs）を通じてParagraphsモジュールとうまく統合されており、ページビルダースタイルのコンテンツ編集に最適です。また、Previewモジュールと併用することでライブプレビュー機能をサポートし、編集者は保存前にリアルタイムで変更を確認できます。
Features
- 設定可能なサイドバーパネルを使用して、フロントエンドから任意のコンテンツEntityを直接編集
- Entityリファレンスフィールド操作：アイテムの上下移動、既存アイテムの前後への新規アイテム追加、アイテムの削除
- ページリロードなしで影響を受けるフィールド領域のみを更新するAJAX駆動のコンテンツ更新
- Previewモジュールと併用時のリアルタイム変更可視化のためのライブプレビュー統合
- ユーザーセッションごとにフロントエンド編集アクションを有効/無効にする設定可能なUIトグルボタン
- 通常ビューと拡大ビューの両方に対応したカスタマイズ可能なサイドバー幅設定
- 編集可能な要素をより視覚的に示すホバーハイライトモード
- サイトのデザインに合わせたカスタマイズ可能なプライマリUIカラー
- サイドバー編集を別のブラウザウィンドウに分離するオプション
- 長いコンテンツ領域でアクションを表示し続けるためのアクションリンク複製機能
- 複製リンクの代替としてのフローティング（固定）アクションリンクオプション
- 選択肢となるバンドルタイプが多い場合の検索可能なアイテム追加ダイアログ
- サードパーティフォーマッター設定によるフィールドごとの設定
- 一貫した管理画面スタイリングのためのGinテーマ統合
- Frontend Editingがアクティブな場合にContextual Linksを非表示にするオプション
- 任意のViewディスプレイに配置して編集アクションを表示できるExtra Fieldプラグイン
Use Cases
Page Builder Content Editing
Ideal for sites using Paragraphs as a page builder. Content editors can add, edit, reorder, and delete paragraph components directly from the page view without navigating to the node edit form. Enable the Frontend Editing Paragraphs sub-module, configure your paragraph entity reference fields with move/add/delete operations, and editors can manage complex layouts in-place.
Quick Content Updates
For sites needing rapid content updates, Frontend Editing allows editors to click any editable entity and immediately start editing in a sidebar panel. This is especially useful for fixing typos, updating text, or making quick changes without losing context of where the content appears on the page.
Editorial Review Workflow
When combined with the Preview module, editors can see live previews of their changes before saving. This creates a workflow where content can be reviewed in context, making it easier to catch layout issues or content mistakes before publishing.
Multi-entity Page Editing
For pages that display multiple entities (like a landing page with multiple block references or media items), Frontend Editing allows editing each entity individually without a complex parent edit form. Each entity shows its own edit link, and changes are saved independently.
Restricted Editor Access
Use the granular permissions to give editors limited capabilities. For example, some users might only be able to edit existing content while others can also add and remove entity references. The separate permissions for move, add, and delete operations allow fine-grained access control.
Tips
- Position the 'Frontend Editing: Actions' extra field at the top of your entity view displays for better visibility.
- Use the 'Hover Highlight Mode' setting to make editable areas more visually distinct, especially helpful for content editors.
- Configure the primary UI color to match your site's branding for a cohesive editorial experience.
- For long content areas (like pages with many paragraphs), enable either 'Duplicate action links' or 'Make action links sticky' to keep editing controls visible.
- Use the UI toggle button to let editors easily disable Frontend Editing when browsing the site as a regular visitor.
- The form display setting on the extra field plugin allows you to use different form displays (simplified forms) for frontend editing vs. the full backend edit form.
- Enable AJAX content update on entity reference fields to refresh just that field area after operations instead of reloading the entire page.
Technical Details
Admin Pages 2
/admin/config/frontend-editing
Configure the main settings for Frontend Editing including sidebar appearance, UI toggle options, and action link behavior.
/admin/config/frontend-editing/entity-bundle-restrictions
Select which content entity types and their bundles should support frontend editing. After saving, the 'Frontend Editing: Actions' extra field becomes available on the Manage Display page for enabled bundles.
権限 5
Hooks 5
hook_entity_view_alter
Alters entity view to add frontend editing actions and configure field operations based on third-party formatter settings.
hook_field_formatter_third_party_settings_form
Adds Frontend Editing configuration options to entity reference field formatters on Manage Display pages.
hook_extra_field_display_info_alter
Alters the extra field display info to dynamically set which bundles the Frontend Editing extra field is available for.
hook_gin_content_form_routes_alter
Adds frontend_editing.form route to Gin theme's content form routes for consistent styling.
hook_toolbar
Adds the frontend editing toggle to the admin toolbar when UI toggle is disabled.
Troubleshooting 7
Ensure the entity type and bundle are enabled at /admin/config/frontend-editing/entity-bundle-restrictions. Then go to the entity's Manage Display page and enable/position the 'Frontend Editing: Actions' extra field.
These operations require per-field configuration. Edit the entity's view display, click the gear icon on the entity reference field formatter, and enable the desired Frontend Editing options in the third-party settings section.
Enable the Frontend Editing Paragraphs sub-module. This requires the Paragraphs Edit module to be installed first. Without this sub-module, paragraph entity types are disabled in the configuration.
Install and enable the Preview module. Then enable the entity types for preview in the Preview module settings. Finally, enable 'Automatic preview' in Frontend Editing settings.
Ensure 'Enable on/off toggle in UI' is checked in Frontend Editing settings. The toggle appears either in the toolbar (when UI toggle is disabled) or as a floating button (when enabled). Check the offset settings to ensure it's positioned visibly.
Adjust the 'Sidebar width' and 'Full width' settings at /admin/config/frontend-editing. Values are percentages of the viewport width.
By default, paragraph reference fields don't support translations. If the parent entity is translatable and you're editing a non-default translation, these operations are disabled unless the field is configured as translatable (using async translation modules).
Security Notes 5
- The 'administer frontend editing' permission should only be granted to trusted administrators as it controls which entity types can be edited from the frontend.
- All entity editing operations respect standard Drupal entity access checks - users can only edit entities they have permission to update.
- The module checks both entity-level and field-level access for all operations.
- CSRF protection is maintained through Drupal's form API when editing entities.
- Access to move, add, and delete operations requires both the specific Frontend Editing permission AND update access to the parent entity.