Mercury Editor
Drupalの標準編集画面を、コンテンツ作成とレイアウト管理のための拡張されたドラッグ＆ドロップエディタインターフェースに置き換えます。
mercury_editor
インストール
composer require 'drupal/mercury_editor:^2.2'
概要
Mercury Editorは、Drupalのデフォルトコンテンツ編集体験を、モダンで直感的なドラッグ＆ドロップインターフェースに変換する包括的なコンテンツ編集ソリューションです。サイドバーパネルで編集しながら、変更のライブプレビューを確認できるスプリットスクリーン編集環境を提供します。
Layout Paragraphsの上に構築されたMercury Editorは、シンプルなドラッグ＆ドロップ操作でコンポーネントの挿入、編集、並べ替え、削除ができるビジュアルページビルディングを可能にします。このモジュールは、コンポーネント編集用の洗練されたダイアログシステム、モバイルプレビュー機能、Drupalのコンテンツ翻訳およびモデレーションワークフローとのシームレスな統合を特徴としています。
エディタインターフェースには、デスクトップ/モバイルプレビュー切り替え、保存と完了ボタン、エンティティフォームを含む折りたたみ可能なサイドバーを備えたツールバーが含まれています。コンポーネントはコンポーネントメニューでカスタムグループに整理でき、編集体験はコンテンツタイプとエンティティバンドルごとにカスタマイズできます。
Features
- iframeでのライブプレビュー付きドラッグ＆ドロップビジュアルページエディタ
- フォームサイドバーとコンテンツプレビューを備えたスプリットスクリーン編集インターフェース
- 設定可能なデバイスプリセット（iPhone 12 Pro、iPhone XR、Pixel 5）によるモバイルプレビュー
- Layout Paragraphs統合を使用したコンポーネントベースのコンテンツ作成
- グループ化とフィルタリング機能を備えたカスタマイズ可能なコンポーネントメニュー
- リサイズ可能なダイアログを備えたコンポーネント編集用Mercury Dialogシステム
- 編集可能なエンティティタイプとしてNodeとTaxonomy Termをサポート
- 言語対応編集によるコンテンツ翻訳サポート
- 編集ワークフロー用のContent Moderation統合
- 特定のParagraphタイプの作成フォームをスキップする設定可能なスキップフォーム機能
- 編集画面での一貫した管理テーマ使用のためのテーマネゴシエーション
- 保存前のデータ損失を防ぐTempstoreベースの編集
- レイアウトセクションの保存と再利用のためのSection Templatesサブモジュール
Use Cases
ビジュアルページビルディング
コンテンツ編集者は、Paragraphコンポーネントをコンテンツエリアにドラッグ＆ドロップして複雑なページレイアウトを構築できます。スプリットスクリーンインターフェースは右側に編集フォーム、左側にライブプレビューを表示し、編集者は編集モードとビューモードを切り替えることなくリアルタイムで変更を確認できます。
モバイルファーストコンテンツレビュー
公開前に、編集者はモバイルプレビュー機能を使用して、異なるデバイスサイズでコンテンツがどのように表示されるかを確認できます。プリセットされたモバイルサイズ（iPhone 12 Pro、iPhone XR、Pixel 5）から選択するか、ターゲットデバイスに合わせてカスタムプリセットを設定できます。
再利用可能なセクションテンプレート
Templatesサブモジュールを有効にすると、編集者は頻繁に使用するレイアウトセクションをテンプレートとして保存できます。例えば、「CTAヒーロー」セクションや「3カラム機能」レイアウトを一度保存して複数のページで再利用でき、一貫性を確保しコンテンツ作成を高速化します。
コンポーネントの整理
サイトビルダーはメニュー設定を使用してParagraphタイプを論理的なグループに整理できます。これにより、編集者がページを構築する際に適切なコンポーネントをすばやく見つけられます。グループには「コンテンツ」、「メディア」、「レイアウト」、「コールトゥアクション」などが含まれる場合があります。
シンプルなコンポーネント作成の合理化
初期設定が不要なシンプルなコンポーネント（スペーサーや区切り線など）には、フォームスキップ設定を使用してフォームを表示せずに即座に挿入できます。これにより、よく使用されるシンプルなコンポーネントの編集ワークフローが高速化されます。
多言語コンテンツ編集
Mercury EditorはDrupalのコンテンツ翻訳システムと統合されており、編集者は同じビジュアル編集体験を維持しながら複数の言語でコンテンツを作成・編集できます。プレビューは現在の言語コンテキストを尊重します。
Tips
- 正確なモバイルプレビューテストのために、ターゲットオーディエンスの最も一般的なデバイスに合わせてモバイルプリセットを設定してください
- スペーサー、区切り線、コンテナなど初期設定が不要なシンプルなコンポーネントにはフォームスキップ設定を使用してください
- メニュー設定でコンポーネントを論理的なグループに整理し、編集者が適切なコンポーネントをすばやく見つけられるようにしてください
- ダイアログトレイ幅設定は編集サイドバーに影響します。フォームの複雑さと画面要件に基づいて調整してください
- Content Moderationを使用する場合、Mercury Editorはシームレスに統合されます。モデレーション状態セレクターは編集フォームに表示されます
- 最良のパフォーマンスのために、ページ上のコンポーネント数を適度に保ってください。多くのネストされたコンポーネントを持つ非常に複雑なページは、エディタの応答性に影響を与える可能性があります
- Templatesサブモジュールは、サイト全体で一貫したページセクションを維持する必要があるマーケティングチームに特に便利です
Technical Details
Admin Pages 6
/admin/config/content/mercury-editor
Mercury Editorのメイン設定ページ。Mercury Editorインターフェースを使用するエンティティバンドルの設定、編集トレイテーマの設定、モバイルプレビュープリセットの定義を行います。
/admin/config/content/mercury-editor/skip-form
新しいコンポーネントを挿入する際にコンテンツ作成フォームをスキップするParagraphタイプを設定します。ここでParagraphタイプを選択すると、挿入をクリックした際にフォームを表示せずに即座にコンポーネントが作成されます。
/admin/config/content/mercury-editor/menu
「コンポーネントを追加」メニューでコンポーネントの整理と表示方法を設定します。YAML形式を使用してカスタムグループを定義し、各グループにParagraphタイプを割り当てます。
/admin/config/content/mercury-editor/dialog
コンポーネント編集に使用されるモーダルダイアログの外観と動作を設定します。設定はYAML形式で定義され、ダイアログタイプごとのカスタマイズをサポートします。
/admin/structure/me-template
Mercury Editor Templatesエンティティタイプの設定を行います。アクセスには「administer mercury editor template」権限が必要です。
/admin/content/me-template
保存されたセクションテンプレートの表示と管理。テンプレートにより、編集者は異なるコンテンツ間でレイアウトセクションを保存して再利用できます。
権限 8
Hooks 10
hook_library_info_alter
ダイアログ機能が必要なコアおよびcontribライブラリにMercury Editorダイアログライブラリをアタッチします。
hook_ajax_render_alter
mercury_editorルートでDrupalの標準openDialogおよびcloseDialog AJAXコマンドをMercury Editorの同等のものに置き換えます。
hook_preprocess
Mercury Editor編集モード用のCSSクラスを設定し、プレビュールートでコンテキストリンクを処理します。
hook_preprocess_layout_paragraphs_builder_controls
Layout ParagraphsビルダーのコンポーネントコントロールをMercury Editorルートとダイアログ設定を使用するように変更します。
hook_preprocess_html
よりクリーンな編集インターフェースのために、Mercury Editor編集画面から管理ツールバーと関連クラスを削除します。
hook_theme_suggestions_page_alter
Mercury Editorルート用にpage__mercury_editorテーマサジェスチョンを追加します。
hook_entity_type_build
サポートされるエンティティタイプ（Node、Taxonomy Term）にMercury Editorフォームクラスを登録します。
hook_entity_display_build_alter
Mercury Editorプレビューまたはエディタモード時にエンティティ参照リビジョンフィールドのLayout Paragraphsビルダーをアクティブ化します。
hook_block_alter
Paragraphフィールドのプレビューモードを検出するために、Field BlockクラスをMercury Editorバージョンに入れ替えます。
hook_form_layout_paragraphs_component_form_alter
コンテンツとスタイルタブを持つタブインターフェースとスタイリングをコンポーネント編集フォームに追加します。
Troubleshooting 6
/admin/config/content/mercury-editorに移動し、「バンドル」でコンテンツタイプのチェックボックスが選択されていることを確認してください。また、コンテンツタイプに少なくとも1つのLayout Paragraphsフィールドが設定されていることを確認してください。
Paragraphタイプが適切に設定され、必要なフィールドがあることを確認してください。カスタムグループを使用している場合はメニュー設定を確認してください。孤立したParagraphタイプはデフォルトグループに表示されます。
JavaScriptが正しく動作しており、コンソールエラーがないことを確認してください。sync-changes機能にはフィールドに適切なdata-sync-changes属性が必要です。Drupal Cacheとブラウザキャッシュをクリアしてください。
/admin/config/content/mercury-editor/dialogでダイアログ設定を確認してください。幅、高さ、リサイズ可能設定を調整してください。デフォルトの「fit-content」はほとんどの場合で機能します。
Mercury Editorは自動的にツールバーを非表示にします。カスタムツールバーモジュールを使用している場合は、mercury_editor_preprocess_htmlがツールバークラスを適切に削除しているか確認してください。CSSの競合を確認してください。
アップグレード前にすべてのMercury Editorサブモジュールを無効にしてください。アップグレード前に設定をメモし、アップグレード後に手動で復元してください。実行: drush pmu mercury_editor_components mercury_editor_layouts mercury_editor_content_moderation mercury_editor_scaffold mercury_editor_dialog mercury_editor_skip_form mercury_editor_edit_tray mercury_editor_style_options mercury_editor_iframe mercury_editor_tabs mercury_editor_inline_editor
Security Notes 3
- Mercury EditorはDrupalの権限システムを尊重します。ユーザーはコンテンツを編集するために適切なエンティティアクセス権限が必要です
- テンプレート作成には「create mercury editor template」権限が必要です。これを信頼できる編集者に制限してください
- Tempstoreはユーザーセッションごとにプライベートに未保存の変更を保存し、ユーザー間のデータ漏洩を防ぎます