The CodeMirror Editor
Integra la biblioteca de editor de código CodeMirror en Drupal, proporcionando resaltado de sintaxis y capacidades de edición de código para áreas de texto, campos y formatos de texto.
codemirror_editor
Instalar
composer require 'drupal/codemirror_editor:^2.0'
Overview
El módulo CodeMirror Editor integra la popular biblioteca JavaScript CodeMirror en Drupal, habilitando funciones avanzadas de edición de código con resaltado de sintaxis para varios lenguajes de programación.
El módulo proporciona múltiples puntos de integración: un plugin de editor de texto que funciona con el módulo Editor de Drupal para configuración estilo WYSIWYG, un widget de campo para editar código en campos string_long y text_long, un formateador de campo para mostrar código con resaltado de sintaxis, y un filtro de texto para agregar resaltado de sintaxis al contenido usando etiquetas <code data-mode="...">.
CodeMirror incluye más de 50 temas de colores (como Monokai, Dracula, Material, Solarized), soporte para 12 lenguajes de programación de forma predeterminada (incluyendo PHP, JavaScript, CSS, HTML, Python, SQL, YAML, Twig y más), y características como números de línea, plegado de código, cierre automático de etiquetas, modo pantalla completa y una barra de herramientas personalizable con botones de formato.
La biblioteca puede cargarse desde CDN (predeterminado) o instalarse localmente usando el comando Drush proporcionado. El módulo también proporciona un sistema de plugins que permite a otros módulos agregar modos de lenguaje personalizados.
Features
- Plugin de Editor de texto que se integra con el módulo Editor de Drupal para configuración de formatos de texto
- Widget de campo para campos string_long y text_long que habilita la edición de código con resaltado de sintaxis
- Formateador de campo para mostrar código con resaltado de sintaxis de solo lectura en la salida del campo
- Filtro de texto que convierte etiquetas <code data-mode="mode">...</code> en bloques de código con resaltado de sintaxis
- Elemento de formulario personalizado (#type => 'codemirror') para usar en formularios personalizados
- Soporte para 12 modos de lenguaje integrados: C-like, CSS, HTML mixed, JavaScript, Markdown, PHP, Python, Ruby, SQL, Twig, XML y YAML
- Más de 50 temas de colores incluyendo Monokai, Dracula, Material, Solarized, Eclipse y más
- Barra de herramientas configurable con botones para negrita, cursiva, subrayado, listas, enlaces, línea horizontal, deshacer/rehacer, limpiar formato y alternar pantalla completa
- Opciones de números de línea, ajuste de línea, plegado de código (gutter de plegado), cierre automático de etiquetas y resaltado de línea activa
- Carga desde CDN (predeterminado) o instalación local de la biblioteca con comando Drush
- Persistencia del modo de lenguaje mediante cookies entre cargas de página
- Atajos de teclado: Ctrl+D para duplicar línea, Ctrl+/ para alternar comentarios, F11 para pantalla completa, Esc para salir de pantalla completa
- Sistema de plugins para modos de lenguaje que permite a otros módulos definir modos personalizados mediante archivos YAML
- Modo overlay HTML/Twig para editar plantillas Twig con resaltado apropiado
Use Cases
Almacenamiento de fragmentos de código en contenido
Crear un tipo de contenido 'Fragmento de código' con un campo text_long usando el widget CodeMirror. Los autores pueden escribir código con soporte de resaltado de sintaxis, y el contenido se muestra usando el formateador CodeMirror para mostrar bloques de código correctamente resaltados y de solo lectura a los visitantes.
Desarrollo de módulos/temas personalizados
Al construir interfaces de administración que requieren entrada de código (como campos CSS personalizados, sobrescrituras de plantillas o configuración en formato de código), use el elemento de formulario #type => 'codemirror' para proporcionar a los desarrolladores una experiencia de edición de código apropiada.
Sitios de documentación y tutoriales
Habilite el filtro de texto CodeMirror en un formato de texto y permita a los autores de contenido incrustar ejemplos de código en su contenido usando etiquetas <code data-mode="php">...</code>. El código se resaltará automáticamente con sintaxis cuando se muestre.
Interfaz de exportación de configuración
Use el plugin de editor CodeMirror con modo YAML para áreas de texto que muestran o editan configuración YAML, proporcionando resaltado apropiado para archivos de configuración de Drupal.
Edición de plantillas Twig
El módulo incluye un modo overlay especial HTML/Twig que resalta correctamente la sintaxis Twig dentro de plantillas HTML, haciéndolo adecuado para interfaces donde los usuarios editan plantillas Twig directamente.
Tips
- Use atajos de teclado para edición más rápida: Ctrl+D duplica la línea actual, Ctrl+/ alterna comentarios, F11 entra en modo pantalla completa y Esc sale de pantalla completa
- El modo de lenguaje seleccionado se guarda en una cookie por textarea, así que las preferencias de modo de los usuarios persisten entre cargas de página
- Cuando use Composer con bower-asset/codemirror, recuerde deshabilitar la opción 'minified' en la configuración del módulo ya que los paquetes instalados con Composer típicamente incluyen solo archivos no minificados
- Los módulos personalizados pueden agregar nuevos modos de lenguaje creando un archivo MODULE_NAME.codemirror_modes.yml con la definición del modo
- El filtro de texto CodeMirror espera código envuelto en etiquetas <code data-mode="mode">...</code> - el atributo data-mode especifica el lenguaje para el resaltado de sintaxis
- Para campos que deben permitir a los usuarios cambiar entre diferentes lenguajes de código, la barra de herramientas proporciona un selector desplegable de modo cuando múltiples modos están habilitados
Technical Details
Admin Pages 1
/admin/config/content/codemirror
Configurar ajustes globales para el editor CodeMirror incluyendo método de carga de la biblioteca, selección de tema y modos de lenguaje habilitados.
Permisos 1
Hooks 2
hook_codemirror_mode_info_alter
Altera la lista de modos de lenguaje de CodeMirror. Use este hook para asegurar que modos de lenguaje específicos siempre se carguen agregando nombres de módulos al array 'usage'.
hook_codemirror_editor_assets_alter
Altera la lista de assets de CodeMirror (archivos JavaScript y CSS). Use esto para agregar addons adicionales de CodeMirror o assets personalizados. Para requerir modos de lenguaje, hook_codemirror_mode_info_alter() es preferible.
Drush Commands 1
drush codemirror:download
Descarga la biblioteca CodeMirror desde CDN al directorio local libraries/codemirror. Este comando obtiene todos los archivos JavaScript y CSS requeridos basándose en la configuración actual (modos habilitados, tema, addons).
Troubleshooting 5
Asegúrese de que el módulo esté correctamente instalado y la biblioteca se esté cargando desde CDN (verifique la configuración 'Cargar la biblioteca desde CDN') o instalada localmente. Si usa instalación local, ejecute 'drush codemirror:download' para descargar los archivos de la biblioteca.
Este es un problema conocido cuando el formulario padre se renderiza dentro de un placeholder de caché por BigPipe. Considere excluir el formulario del cacheo de BigPipe o ajustar su estrategia de cacheo para formularios que usan CodeMirror.
Cuando use instalación local, asegúrese de que todos los archivos requeridos existan en libraries/codemirror/. Ejecute 'drush codemirror:download' para descargar automáticamente todos los archivos requeridos. La página de Informe de estado (/admin/reports/status) mostrará un error si faltan archivos.
Vaya a Administración > Configuración > Creación de contenido > CodeMirror y habilite el modo de lenguaje deseado en la sección 'Modos de lenguaje'. Algunos modos tienen dependencias que se cargarán automáticamente.
La configuración del tema es global y no puede cambiarse por textarea. Asegúrese de que el tema correcto esté seleccionado en la configuración del módulo. Si usa instalación local, verifique que el archivo CSS del tema exista en libraries/codemirror/theme/.
Security Notes 4
- El plugin de Editor tiene 'is_xss_safe' establecido en FALSE, lo que significa que el contenido editado con CodeMirror debe filtrarse apropiadamente antes de la salida para prevenir ataques XSS
- El filtro de texto usa HTML::escape() para sanitizar el contenido del código antes de renderizarlo, previniendo ataques de inyección en bloques de código mostrados
- El permiso 'administer codemirror editor' tiene 'restrict access: true', indicando que solo debe otorgarse a roles de administrador de confianza
- Nota: El módulo JS Cookie usa CDN de forma predeterminada y puede tener implicaciones de cumplimiento GDPR - considere instalar la biblioteca js_cookie localmente para despliegues conscientes de la privacidad