El IDS cambia al intentar configurar componentes en el lienzo usando json

Hola @shelendravashishtha2 ¿podrías indicar los pasos exactos (necesito saber a qué te refieres el 'json')?

He visto que esto también ocurre si no guardas una referencia en el CSS antes de usar el método editor.setComponents() Todo el marcado CSS del selector/referencia de elements id se elimina al usar el método editor.setComponents() Los pasos exactos que he encontrado son guardar una referencia de los componentes del editor como JSON, es decir,

'let jsonElements = editor.getComponents().toJSON();

editor.setComponents(jsonElements)

`

tras usar el método setComponents, el makrup CSS se pierde para todos los selectores de id de los bloques, y algunos ids de componentes cambian, es decir, si se #iefzr cambian a #iefzr-2

La razón por la que he usado los jsonElements guardados es para poder editarlos desde la interfaz con un editor como monaco editor, mira mi captura de pantalla abajo, pero incluso sin modificar el JSON, el CSS se reinicia

¿Hay alguna forma mejor de modificar el JSON, es decir, uno a uno en lugar de modificarlo mediante setComponents?

! imagen

Gracias por informar de esto, @shelendravashishtha2.

Buena pregunta sobre Ids que se modifica al intentar colocar componentes en el lienzo usando json. 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!