Issue #4083💬 RespondidoAbierto el 20 de enero de 2022por henzigoReacciones 1

Establecer raíz no funciona

Respuesta rápidapor artf❤ 1

Sí, el módulo LayerManager en sí no tiene documentación. De hecho, está en lista de espera para la refactorización y, una vez terminada, podremos publicar más sobre su uso y la documentación de la API. En fin, he visto tu mensaje anterior sobre cómo te gustaría usar mi ejemplo de demostración pero con lógica invertida...

Lee la respuesta completa abajo ↓

Pregunta

Versión GrapesJS

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

¿Qué navegador usas?

Safari 15.0

Enlace de demo reproducible

https://jsfiddle.net/adw6y12f/9/

Describe el bicho

Hola, Estoy intentando establecer el componente raíz para el editor tal y como se describió aquí. Desafortunadamente, esto no funciona y puedo editar todo el contenido HTML.

Gracias por tu consejo o por arreglar ese bug :)

¿Cómo reproducir el bicho?

Crear HTML con algunos divs
Establece 'id' o 'class' como un div que quieres que sea capa raíz
Establece ese 'id' como elemento raíz en el método 'init': '''js grapesjs.init({ Contenedor: '#gjs', fromElement: 1, Altura: '100%', storageManager: { type: 0 }, Plugins: ['GJS-Bloques-Básico'], layerManager: { Root: '#editable', }, });

4. Puedes editar todos los elementos en el editor

**¿Cuál es el comportamiento esperado?**
Todos los elementos se renderizarán, pero solo los elementos del elemento raíz serán editables 

**¿Cuál es el comportamiento actual?**
Todos los elementos son editables

### Código de conducta

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

Respuestas (4)

artf• 25 de enero de 2022

En fin, he visto tu mensaje anterior sobre cómo te gustaría usar mi ejemplo de demostración pero con lógica invertida (activando solo lo que se sabe). Bueno, lo he probado, pero por desgracia ya he detectado algunos problemas que tengo que arreglar antes. Cuando la próxima versión esté lista, publicaré el ejemplo de la demo.

artf• 21 de enero de 2022

Sí, veo el problema con la configuración raíz en LayerManager. La solución temporal sería activar el cambio de raíz al renderizar el panel de capas: '''js editor.on('run:core:open-layers', () => editor. Layers.setRoot('#editable'));

Pero en fin, la raíz del LayerManager no decide si tus componentes son editables o no, su propósito aquí es solo cambiar la raíz en el panel de la interfaz de LayerManager.

Si necesitas desactivar partes de tu plantilla, probablemente esto sea lo que buscas: https://jsfiddle.net/artur_arseniev/w6mvq4bx/

henzigo• 21 de enero de 2022

Gracias por tu respuesta. Sería bueno tener algo de documentación sobre qué es el elemento 'raíz', porque solo las menciones están en relaciones públicas o en números.

ClaudeCode• 17 de mayo de 2026

Gracias por informar de esto, @henzigo.

Buena pregunta sobre Establecer raíz no funciona. El enfoque recomendado con Componentes es utilizar la API orientada a eventos.

Empieza aquí:

Consulta la documentación de GrapesJS de tu módulo específico
Busca el método del oyente de eventos 'on()'
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!