Grapesjs lanza un DOMException si importas contenido HTML con atributos inválidos (numerados)
Para que te mantengas informado, apliqué la solución de intentar y atrapar que @ankx06 y @artf a nuestro código, pero de forma genérica. Quería asegurarme de que la excepción se detectara en todos los casos en que se llame a setComponents(). Ya sea por nuestro código o, más importante aún (y que no está cubierto por e...
Lee la respuesta completa abajo ↓Pregunta
Hola @artf,
Recibimos un informe que indica que cuando importas código HTML con atributos incorrectos, como
'<td class="cell" 01234="0" >¡Hola mundo! </td>`
grapes.js lanza la siguiente DOMException No Capturada: No se ejecutó 'setAttribute' en 'Element': '01234' no es un nombre de atributo válido. en HTMLTableCellElement. <anonymous> (https://grapesjs.com/js/grapes.min.js?v0.14.61:3:3229) en x (https://grapesjs.com/js/grapes.min.js?v0.14.61:3:1245) en m.each (https://grapesjs.com/js/grapes.min.js?v0.14.61:3:4121) en M.Attr (https://grapesjs.com/js/grapes.min.js?v0.14.61:3:3195) en M.Attr (https://grapesjs.com/js/grapes.min.js?v0.14.61:3:3276) en i.updateAttributes (https://grapesjs.com/js/grapes.min.js?v0.14.61:2:60111) at i.renderAttributes (https://grapesjs.com/js/grapes.min.js?v0.14.61:2:60919) en i.render (https://grapesjs.com/js/grapes.min.js?v0.14.61:2:61020)
A menos que sea una elección explícita por tu parte, ¿crees que podrías hacer algo para detectar esta excepción en el analizador, o al menos darnos una forma de gestionarlo por nuestra cuenta? ¿Como alguna opción para ignorar explícitamente esos atributos?
Claro, el usuario no debería importar ese tipo de contenido, pero no siempre podemos garantizar que no haga algo así ;)
Gracias por tu ayuda.
-Maxime
Respuestas (3)
Para que te mantengas informado, apliqué la solución de intentar y atrapar que @ankx06 y @artf a nuestro código, pero de forma genérica.
Quería asegurarme de que la excepción se detectara en todos los casos en que se llame a setComponents(). Ya sea por nuestro código o, más importante aún (y que no está cubierto por el ejemplo de @ankx06, que yo sepa) desde la ventana de Código de Importación.
Así que utilicé una técnica de cierre en JavaScript para envolver la función setComponents() original dentro de una nueva, en la que puse el try/catch: https://stackoverflow.com/a/10427757
'''js var myGrapesJsObject = grapesjs.init(...); myGrapesJsObject.setComponents = (función (originalFct) { función return (componentes) { try { originalFct(componentes); } Captura (ex) { window.alert('Error de análisis sintáctico: ' + ex); } } })(myGrapesJsObject.setComponents);
Y funciona perfectamente. No más bloquear las DOMExceptions.
¡Gracias a todos por vuestras sugerencias!
@jmchaves esto no se llama desde ningún evento. Esta es la función para actualizar los componentes internos/html de los componentes.
También me he encontrado con este problema al configurar un atributo/estilo inválido para la altura/ancho de la imagen.
Actualmente, he manejado usando un bloqueo try-catch '''js static updateInnerHTMLofComponent(component, newContent) { Poner contenido interno vacío // esto es opcional component.set("content", "");
Añadir contenido nuevo en el componente. Esto eliminará componentes hijos existentes y creará nuevos componentes hijos try { component.components (nuevoContenido); } catch (error) { Falló el procesamiento del renderizado de componentes cuando el usuario estableció atributos inválidos en uno de los componentes this.hendleComponentRenderFailed(component, error.message); } }
Si el newContent tiene varios componentes y solo un componente tiene el error, por excepción ninguno de los componentes se renderiza, al menos los componentes que no están en error deberían renderizarse correctamente y el componente que está equivocado puede renderizarse tras ignorar dicho atributo inválido.
Gracias,
Ankit
Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
Issue #921
[PREGUNTA] Selecciona y enfoca un elemento html desde un botón de panel
Hola a todos, ¿Es posible establecer el enfoque en un HTML de sección con Grapes, como un ancla? Tengo un botón de panel y solo selecciona...
Issue #843
[PREGUNTA] - CssComposer - elimina clases no utilizadas
Hola @artf, Importo un html, usando import de grapesjs-preset-newsletter, con algunas clases CSS dentro de la <style>etiqueta ''. Después d...
Issue #2674
[PREGUNTAS] integración de contenido i18n
Hola, Estoy trabajando en la integración de mi sistema de localización (i18n) con grapes.js. La idea es tener un campo de datos, que conten...
Issue #1817
Cambiar el contenido HTML mientras el bloque se renderiza en el editor
Hola @artf Tengo un bloque en el gestor de bloques como Según el script anterior dentro del bloque, quiero añadir contenido HTML dinámico m...
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 →Explorar categorías de plugins
Ve directamente a las páginas de categorías de plugins en el marketplace.