Mercury Editor
Reemplaza la pantalla de edición estándar de Drupal con una interfaz de editor mejorada con arrastrar y soltar para la creación de contenido y gestión de diseños.
mercury_editor
Install
composer require 'drupal/mercury_editor:^2.2'
Overview
Mercury Editor es una solución integral de edición de contenido que transforma la experiencia de edición predeterminada de Drupal en una interfaz moderna e intuitiva con funcionalidad de arrastrar y soltar. Proporciona un entorno de edición de pantalla dividida donde los editores de contenido pueden ver una vista previa en vivo de sus cambios mientras editan en un panel lateral.
Construido sobre Layout Paragraphs, Mercury Editor permite la construcción visual de páginas con componentes que pueden insertarse, editarse, reordenarse y eliminarse mediante simples interacciones de arrastrar y soltar. El módulo incluye un sofisticado sistema de diálogos para la edición de componentes, capacidades de vista previa móvil e integración perfecta con los flujos de trabajo de traducción y moderación de contenido de Drupal.
La interfaz del editor incluye una barra de herramientas con alternancia de vista previa escritorio/móvil, botones de guardar y finalizar, y una barra lateral plegable que contiene el formulario de la entidad. Los componentes pueden organizarse en grupos personalizados en el menú de componentes, y la experiencia de edición puede personalizarse por tipo de contenido y bundle de entidad.
Features
- Editor visual de páginas con arrastrar y soltar con vista previa en vivo en un iframe
- Interfaz de edición de pantalla dividida con barra lateral de formulario y vista previa del contenido
- Vista previa móvil con preajustes de dispositivo configurables (iPhone 12 Pro, iPhone XR, Pixel 5)
- Creación de contenido basada en componentes usando la integración con Layout Paragraphs
- Menú de componentes personalizable con capacidades de agrupación y filtrado
- Sistema Mercury Dialog para edición de componentes con diálogos redimensionables
- Soporte para nodes y términos de taxonomía como tipos de entidad editables
- Soporte de traducción de contenido con edición consciente del idioma
- Integración con Content Moderation para flujos de trabajo editoriales
- Función configurable de omitir formulario para evitar formularios de creación en tipos de párrafo específicos
- Negociación de tema para uso consistente del tema de administración en pantallas de edición
- Edición basada en tempstore para prevenir pérdida de datos antes de guardar
- Submódulo de plantillas de sección para guardar y reutilizar secciones de diseño
Use Cases
Construcción visual de páginas
Los editores de contenido pueden construir diseños de página complejos arrastrando y soltando componentes de párrafo en el área de contenido. La interfaz de pantalla dividida muestra el formulario de edición a la derecha y una vista previa en vivo a la izquierda, permitiendo a los editores ver sus cambios en tiempo real sin cambiar entre modos de edición y visualización.
Revisión de contenido con enfoque móvil
Antes de publicar, los editores pueden usar la función de vista previa móvil para comprobar cómo aparece el contenido en diferentes tamaños de dispositivo. Seleccionar entre dimensiones móviles preestablecidas (iPhone 12 Pro, iPhone XR, Pixel 5) o configurar preajustes personalizados para coincidir con sus dispositivos objetivo.
Plantillas de sección reutilizables
Con el submódulo de plantillas habilitado, los editores pueden guardar secciones de diseño usadas frecuentemente como plantillas. Por ejemplo, una sección 'Hero con CTA' o un diseño 'Características en tres columnas' pueden guardarse una vez y reutilizarse en múltiples páginas, asegurando consistencia y acelerando la creación de contenido.
Organización de componentes
Los constructores de sitios pueden organizar los tipos de párrafo en grupos lógicos usando la configuración del menú. Esto ayuda a los editores a encontrar el componente correcto rápidamente al construir páginas. Los grupos pueden incluir 'Contenido', 'Media', 'Diseño', 'Llamada a la acción', etc.
Creación simplificada de componentes simples
Para componentes simples que no requieren configuración inicial (como un espaciador o divisor), usar la configuración de omitir formulario para permitir inserción inmediata sin mostrar un formulario. Esto acelera el flujo de trabajo de edición para componentes simples usados comúnmente.
Edición de contenido multilingüe
Mercury Editor se integra con el sistema de traducción de contenido de Drupal, permitiendo a los editores crear y editar contenido en múltiples idiomas mientras mantienen la misma experiencia de edición visual. La vista previa respeta el contexto del idioma actual.
Tips
- Configurar los preajustes móviles para coincidir con los dispositivos más comunes de su audiencia objetivo para pruebas precisas de vista previa móvil
- Usar la configuración de omitir formulario para componentes simples como espaciadores, divisores o contenedores que no necesitan configuración inicial
- Organizar los componentes en grupos lógicos en la configuración del menú para ayudar a los editores a encontrar el componente correcto rápidamente
- La configuración de ancho de la bandeja de diálogo afecta a la barra lateral de edición - ajustarla según la complejidad de sus formularios y requisitos de pantalla
- Al usar Content Moderation, Mercury Editor se integra perfectamente - el selector de estado de moderación aparece en el formulario de edición
- Para mejor rendimiento, mantener el número de componentes en una página razonable - páginas muy complejas con muchos componentes anidados pueden afectar la capacidad de respuesta del editor
- El submódulo de plantillas es particularmente útil para equipos de marketing que necesitan mantener secciones de página consistentes en todo el sitio
Technical Details
Admin Pages 6
/admin/config/content/mercury-editor
Página de configuración principal de Mercury Editor. Configura qué bundles de entidad usan la interfaz de Mercury Editor, establece el tema de la bandeja de edición y define los preajustes de vista previa móvil.
/admin/config/content/mercury-editor/skip-form
Configurar qué tipos de párrafo deben omitir el formulario de creación de contenido al insertar nuevos componentes. Cuando un tipo de párrafo está seleccionado aquí, al hacer clic para insertarlo se creará inmediatamente el componente sin mostrar un formulario.
/admin/config/content/mercury-editor/menu
Configurar cómo se organizan y muestran los componentes en el menú 'Añadir componente'. Definir grupos personalizados y asignar tipos de párrafo a cada grupo usando formato YAML.
/admin/config/content/mercury-editor/dialog
Configurar la apariencia y comportamiento de los diálogos modales usados para la edición de componentes. Las configuraciones se definen en formato YAML con soporte para personalización por tipo de diálogo.
/admin/structure/me-template
Configurar opciones para el tipo de entidad de plantillas de Mercury Editor. El acceso requiere el permiso 'administer mercury editor template'.
/admin/content/me-template
Ver y gestionar plantillas de sección guardadas. Las plantillas permiten a los editores guardar y reutilizar secciones de diseño en diferentes contenidos.
Permissions 8
Hooks 10
hook_library_info_alter
Adjunta las librerías de diálogo de Mercury Editor a las librerías del núcleo y contribuidas que necesitan funcionalidad de diálogo.
hook_ajax_render_alter
Reemplaza los comandos AJAX openDialog y closeDialog estándar de Drupal con equivalentes de Mercury Editor en las rutas de mercury_editor.
hook_preprocess
Establece clases CSS para el modo de edición de Mercury Editor y maneja los enlaces contextuales en las rutas de vista previa.
hook_preprocess_layout_paragraphs_builder_controls
Modifica los controles de componentes en el constructor de Layout Paragraphs para usar las rutas y configuración de diálogo de Mercury Editor.
hook_preprocess_html
Elimina la barra de herramientas de administración y las clases relacionadas de las pantallas de edición de Mercury Editor para una interfaz de edición más limpia.
hook_theme_suggestions_page_alter
Añade la sugerencia de tema page__mercury_editor para las rutas de Mercury Editor.
hook_entity_type_build
Registra las clases de formulario de Mercury Editor para los tipos de entidad soportados (nodes, términos de taxonomía).
hook_entity_display_build_alter
Activa el constructor de Layout Paragraphs para campos de referencia de revisiones de entidad cuando está en modo de vista previa o editor de Mercury Editor.
hook_block_alter
Intercambia la clase Field Block con la versión de Mercury Editor para detectar el modo de vista previa para campos de párrafo.
hook_form_layout_paragraphs_component_form_alter
Añade una interfaz con pestañas y estilos a los formularios de edición de componentes con pestañas de Contenido y Estilos.
Troubleshooting 6
Navegar a /admin/config/content/mercury-editor y asegurar que la casilla del tipo de contenido está seleccionada bajo 'Bundles'. También verificar que el tipo de contenido tiene al menos un campo de Layout Paragraphs configurado.
Verificar que los tipos de párrafo están correctamente configurados y tienen los campos necesarios. Verificar la configuración del menú si está usando grupos personalizados - los tipos de párrafo huérfanos deben aparecer en el grupo predeterminado.
Asegurar que JavaScript está funcionando correctamente y no hay errores en la consola. La funcionalidad de sincronización de cambios requiere atributos data-sync-changes apropiados en los campos. Limpiar la caché de Drupal y la caché del navegador.
Revisar la configuración de diálogos en /admin/config/content/mercury-editor/dialog. Ajustar la configuración de ancho, alto y redimensionable. El valor predeterminado 'fit-content' debería funcionar para la mayoría de los casos.
Mercury Editor debería ocultar automáticamente la barra de herramientas. Si está usando módulos de barra de herramientas personalizados, verificar que mercury_editor_preprocess_html está eliminando correctamente las clases de toolbar. Verificar conflictos de CSS.
Deshabilitar todos los submódulos de Mercury Editor antes de actualizar. Anotar la configuración antes de actualizar, luego restaurarla manualmente después. Ejecutar: 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 respeta el sistema de permisos de Drupal - los usuarios necesitan permisos de acceso a entidad apropiados para editar contenido
- La creación de plantillas requiere el permiso 'create mercury editor template' - restringir esto a editores de confianza
- El tempstore almacena cambios no guardados de forma privada por sesión de usuario para prevenir fugas de datos entre usuarios