Issue #5232✓ ResueltoAbierto el 11 de julio de 2023por bgrand-chReacciones 5

Trabajador - Sin interfaz de texto "documento no está definido"

Respuesta rápidapor artf3

Hola @bgrand-ch, desafortunadamente todo lo que involucra el analizador (HTML/CSS) requiere que la API relacionada con el DOM esté disponible. Para el CSS quizá puedas probar a usar parser-postcss plugin, esperaría que funcione en el entorno de trabajo

Lee la respuesta completa abajo ↓

Pregunta

Versión GrapesJS

  • Confirmo que se debe usar la última versión de GrapesJS

¿Qué navegador usas?

114.0.5735.133

Enlace de demo reproducible

Es imposible añadir una obrera para reproducirse.

Describe el bicho

¿Cómo reproducir el bicho?

  1. Añadir un trabajador web.
  2. Inicializar GrapesJS con la opción "headless" dentro del trabajador.
  3. Añadir un plugin con "editor. DomComponents.addType" + "estilos".
  4. Enviar un mensaje al trabajador.
  5. ErrorReferencia: el documento no está definido.

¿Cuál es el comportamiento esperado? Usa GrapesJS dentro de un worker sin el error "ReferenceError: document is not defined".

¿Cuál es el comportamiento actual? ErrorReferencia: el documento no está definido.

Si es necesario ejecutar algo de código para reproducir el error, pégalo aquí abajo:

plugin.js '''js Tipo const = 'botón'

function plugin (editor, options) { const domComponents = editor. DomComponents

domComponents.addType(type, { isComponent (element) { return element.dataset.type === tipo }, modelo: { Predeterminados: { etiquetaNombre: 'entrada', atributos: { tipo: 'botón', 'tipo de dato': tipo }, Clases: [ Tipo ], Estilos: ' .${type} { pantalla: bloque en línea; } ` } } }) }


worker.js
'''js
importar addPlugin desde './plugin.js'

onmessage = función (evento) {
  try {
    grapesjs.init({
      Sin cabeza: Cierto,
      Plugins: [
        addPlugin
      ]
    })
    postMessage({ éxito: verdadero })
  } catch (error) {
    postMessage({ éxito: false, error })
  }
}

index.js '''js trabajador const = nuevo trabajador('worker.js')

Worker.onmessage = (evento) => { const data = evento.data console.log('Resultado del trabajador editor', datos) }

worker.postMessage({})


### Código de conducta

- [X] Acepto seguir el Código de Conducta de este proyecto

Respuestas (4)

👍 Muy útilartf11 de julio de 2023

Hola @bgrand-ch, desafortunadamente todo lo que involucra el analizador (HTML/CSS) requiere que la API relacionada con el DOM esté disponible. Para el CSS quizá puedas probar a usar parser-postcss plugin, esperaría que funcione en el entorno de trabajo

bgrand-ch11 de julio de 2023

Hola @artf, muchas gracias por tu respuesta 😄 rápida, lo intentaré esta semana.

bgrand-ch11 de julio de 2023

@artf El plugin de analizador CSS de Post funciona perfectamente en un web worker! Gracias por tu ayuda.

ClaudeCode17 de mayo de 2026

Gracias por informar de esto, @bgrand-ch.

Buena pregunta sobre Worker - Headless "documento no está definido". El enfoque recomendado con StyleManager es usar la API orientada a eventos.

Empieza aquí:

  1. Consulta la documentación de GrapesJS de tu módulo específico
  2. Busca el método del oyente de eventos 'on()'
  3. La mayoría de las operaciones se pueden realizar escuchando eventos del editor y de los componentes

Patrones comunes: '''javascript Prestad atención a los cambios editor.on('Change', () => console.log('Something Changed'));

Ciclo de vida de los componentes editor.on('component:mount', (c) => console.log('component ready', c)); editor.on('component:update', (c) => console.log('component updated', c));


**Si sigues atascado:**
- Compartir una reproducción mínima de CodeSandbox
- Incluye lo que ya has probado
- Menciona tu versión GrapesJS
- ¡La comunidad está aquí para ayudar!

Preguntas y respuestas relacionadas

Continúa investigando con debates sobre temas similares.

Plugins de pago que cumplen con este problema

Seleccionado por temas clave y relevancia de etiquetas para ayudarte a enviar más rápido.

Ver todos los plugins

Cargando recomendaciones de plugins de pago...

Opción gratuita

Consulta los plugins de código abierto de GrapesJS en GitHub O haz una búsqueda rápida en nuestro catálogo gratuito.

Explora plugins gratuitos →
Opción premium

Los plugins premium incluyen soporte, actualizaciones regulares y funciones listas para producción — ahorrando días de trabajo de integración.

Explora plugins premium →

Tutoriales relacionados

Guías detalladas sobre el mismo tema.

Todos los tutoriales →

Explorar categorías de plugins

Ve directamente a las páginas de categorías de plugins en el marketplace.