Modificar un componente en el editor elimina el contenido del modelo
Hola Austin, la razón de tu problema es simplemente porque el RTE integrado funciona de forma diferente a uno personalizado (por ejemplo, el plugin CKEditor) que simplemente escribe todos los cambios dentro de 'content'. https://github.com/artf/grapesjs/blob/dev/src/dom_components/view/ComponentTextView.js#L67-L90 El...
Lee la respuesta completa abajo ↓Pregunta
Lo que intento conseguir: Tengo atributos especiales de "datos-" en algunos de los componentes que extrao al editor. Cuando uno de estos se modifica, quiero obtener el valor del atributo "data-" y el contenido nuevo. Tengo código escuchando cuando se modifica un componente. Cuando se activa este evento, estoy revisando el contenido (en proceso). Sin embargo, cuando recibo el contenido, está vacío, aunque el componente no lo esté...
El problema parece ser que, en lugar de modificar el modelo de componentes existente, se crea uno nuevo.
'editor.on( 'component:update' , function( model ) { console.log( JSON.stringify( modelo ) ); });`
Al seleccionar el elemento que quiero modificar, el modelo se escribe en el console.log 2x
'{"tagName":"p", "type":"text", "removible":true,"arrastrable":true,"droppable":false,"badgable":true,"stylable":true,"stylable-require":"""unstylable":""resaltable":"copyable":true,"copyable":true,"ressizeable":false,"editable":true,"layerable":true,"selectable":true,"hoverable":true,"void":false,"state":"state"content":""esta es una casa increíble que deberías comprar inmediatamente! Este texto está aquí para que puedas ver cómo es una descripción completa.","icono":"","estilo":{},"atributos":{"data-track-changes":"","data-meta-field":"value_primary_description_html"},"classes":[{"name":"track-changes","label":"track-changes", "type":1,"active":true,"private":false,"protected":false}],"script":""false}]"script":""strength":[{"type":"text","label":""name":"id","min":""min","max":"value":""default":"","default":""placeholder":"ej. Texto aquí","changeProp":0,"options":[]},{"type":"text", "label":""", "name":"title", "min":"", "max":""value":"""default":"", "placeholder":"ej. Texto aquí","changeProp":0,"options":[]}],"propagate":"","components":[]}'
'{"tagName":"p", "tipo":"texto", "removible":true,"arrastrable":true,"droppable":false,"badgable":true,"stylable":true,"stylable-require":""unstylable":"""highlightable":true,"copyable":true,"resizeable":false,"editable":true,"layerable":true,"selectable":true,"hoverable":true,"void":false,"state":"state":"selected","content":""esta es una casa increíble que deberías comprar inmediatamente! Este texto está aquí para que puedas ver cómo es una descripción completa.","icono":"","estilo":{},"atributos":{"data-track-changes":"","data-meta-field":"value_primary_description_html"},"classes":[{"name":"track-changes","label":"track-changes", "type":1,"active":true,"private":false,"protected":false}],"script":""false}]"script":""strength":[{"type":"text","label":""name":"id","min":""min","max":"value":""default":"","default":""placeholder":"ej. Texto aquí","changeProp":0,"options":[]},{"type":"text", "label":""", "name":"title", "min":"", "max":""value":"""default":"", "placeholder":"ej. Texto aquí","changeProp":0,"options":[]}],"propagate":"","components":[]}'
Después de hacer mis cambios y desseleccionar el componente, el evento (component:update:content) se activa y devuelve el siguiente modelo:
'{"tagName":"p',"type":"text","removable":true,"arrastrable":true,"droppable":false,"badgable":true,"stylable":true,"stylable-require":"","unstylable":"","highlightable":true,"copyable":true,"ressizeable":false,"editable":true,"layerable":true,"selectable":true,"hoverable":true,"void":false,"state"""state":"status":"selected,"content"""icon":""style":{},"attributes":{"data-track-changes":"","data-rate-metafield":"value_primary_description_html"}," clases":[{"nombre":"Seguimiento-cambios","etiqueta":"Seguimiento-cambios","Tipo":1,"Activo":True,"Privado":Falso,"Protegido":Falso}],"Script":""True","Rasgos":[{"Tipo":"Texto","Etiqueta":"Etiqueta":""Nombr":"Id","Min":"Máximo":""Valor":""Valor":""Default":""Ejemplo. Texto aquí","changeProp":0,"options":[]},{"type":"text", "label":""", "name":"title", "min":"", "max":""value":"""default":"", "placeholder":"ej. Texto aquí","changeProp":0,"options":[]}],"propagate":"","components":[]}'
No estoy seguro de qué estoy haciendo mal aquí, o si hay una forma mejor de hacerlo. ¿Es esto un error?
Respuestas (3)
Hola Austin, la razón de tu problema es simplemente porque el RTE integrado funciona de forma diferente a uno personalizado (por ejemplo, el plugin CKEditor) que simplemente escribe todos los cambios dentro de 'content'. https://github.com/artf/grapesjs/blob/dev/src/dom_components/view/ComponentTextView.js#L67-L90 El RTE por defecto reinicia sus componentes con un contenido recién actualizado, así que tienes que comprobarlos a través de 'model.components()' en lugar de 'model.get('content')'
He estado revisando más código y, por lo que he visto, esto no ocurre cuando uso el plugin CKEditor (probado con la demo del boletín). Sin embargo, al usar el RTE por defecto sí ocurre (probado con mi propio código y la demo de la web)
<sub>Enviado con <a href="http://githawk.com">GitHawk</a></sub>
Este hilo se ha bloqueado automáticamente porque no ha habido actividad reciente desde que se cerró. Por favor, abre un nuevo problema para bugs relacionados.
Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
Issue #460
Cuando la vista del componente modifica el HTML, los componentes de texto ya no son editables
Estoy intentando crear un componente personalizado que contenga algo de texto lorem ipsum en el contenido, para editarlo una vez que esté e...
Issue #1658
[BUG] El rasgo de casilla de verificación no carga como marcado incluso cuando el valor del rasgo es verdadero
Hola, Estoy usando la versión 0.14.33 de Grapesjs. Estoy cargando algunos componentes cuando carga el formulario y tengo un componente con...
Issue #1424
El valor del rasgo de casilla se muestra de forma diferente en vista (render()) frente al modelo (getHtml())
Tengo un componente personalizado con un rasgo de casilla de verificación 'mostrar-nombre'. Cuando el valor del rasgo es 'true', el compone...
Issue #786
Cómo obtener los siguientes y anteriores modelos/elementos del elemento seleccionado
Estoy clonando un elemento. Quiero conseguir el siguiente elemento o el anterior. Con esto quiero decir que ¿cómo puedo conseguir el modelo...
Plugins de pago que cumplen con este problema
Seleccionado por temas clave y relevancia de etiquetas para ayudarte a enviar más rápido.
Cargando recomendaciones de plugins de pago...
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 →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.
Explorar categorías de plugins
Ve directamente a las páginas de categorías de plugins en el marketplace.