Grapes JS versión v0.16.34 que ofrece código de script inesperado tras cargar HTML guardado
Por favor, alguien me ayude a salir de este problema editor.setComponents (texto html); No funciona el script como se espera tras cargar desde la plantilla guardada en HTML mientras arrastra y solta, funciona después de guardar y volver a cargar ese HTML con editor.setComponents (texto html); Luego el script existente...
Lee la respuesta completa abajo ↓Pregunta
Código de adjunto:
Mientras guardas el HTML:
<div class="gjs-row">
<div class="gjs-cell">
<div class="gjs-row">
<div class="gjs-cell">
<div id="i6x6">
<div id="bsrne9exd5" style="height:300px" tg="DataGrid" tagName="DataGrid" class="ag-theme-alpine">
</div>
</div>
</div>
<div class="gjs-cell">
<div id="ibc4">
<id/div="3drqn6v2q5"style="height:300px" tg="DataGrid" tagName="DataGrid" class="ag-theme-alpine">
</div>
</div>
</div>
</div>
</div>
</div>
<script>var items = document.querySelectorAll('#i6x6');
para (var i = 0, len = items.length; i < len; i++) {
(función(){
var columnDefs = [{
encabezadoNombre: 'Hacer', campo: 'hacer', sortable: true, filtro: true}
, {
encabezadoNombre: 'Modelo', campo: 'modelo', sortable: true, filter: true}
,{
encabezadoNombre: 'Precio', campo: 'precio', sortable: true, filter: true}
];
var rowData = [{
marca: 'Toyota', modelo: 'Celica', precio: 35000}
,{
marca: 'Ford', modelo: 'Mondeo', precio: 32000}
,{
marca: 'Porsche', modelo: 'Boxter', precio: 72000}
];
var gridOptions = {
defaultColDef: {
redimensionable: true }
,columnDefs: columnDefs,rowData: rowData};
var gridDiv = document.getElementById('bsrne9exd5');
nuevo agGrid.Grid (gridDiv, gridOptions);
}
.bind(elementos[i]))();
}
var items = document.querySelectorAll('#ibc4');
para (var i = 0, len = items.length; i < len; i++) {
(función(){
var columnDefs = [{
encabezadoNombre: 'Hacer', campo: 'hacer', sortable: true, filtro: true}
, {
encabezadoNombre: 'Modelo', campo: 'modelo', sortable: true, filter: true}
,{
encabezadoNombre: 'Precio', campo: 'precio', sortable: true, filter: true}
];
var rowData = [{
marca: 'Toyota', modelo: 'Celica', precio: 35000}
,{
marca: 'Ford', modelo: 'Mondeo', precio: 32000}
,{
marca: 'Porsche', modelo: 'Boxter', precio: 72000}
];
var gridOptions = {
defaultColDef: {
redimensionable: true }
,columnDefs: columnDefs,rowData: rowData};
var gridDiv = document.getElementById('3drqn6v2q5');
nuevo agGrid.Grid (gridDiv, gridOptions);
}
.bind(elementos[i]))();
}
</script>
Después de guardar el código, conviértete en:
<div class="gjs-row">
<div class="gjs-cell">
<div class="gjs-row">
<div class="gjs-cell">
<div id="iepv">
<id/div="4h942l66s5" tg="DataGrid" etiqueta_"DataGrid" clase="ag-theme-alpine">
</div>
</div>
</div>
<div class="gjs-cell">
<div id="iiih">
<div id="l6r4s71nr5" tg="DataGrid" etiqueta "DataGrid" clase="ag-theme-alpine">
</div>
</div>
</div>
</div>
</div>
</div>
<div id="loader" class="loader text-center d-none">
<div id="ie5kf" class="spinner-border text-primary">
</div>
<div id="iqy34">Procesamiento.........
</div>
</div>
<tipo de entrada="oculto" id = NombreDesolución " nombre="NombreSolución" valor="TestFinal"/>
<tipo de entrada="oculto" id="IdPlantilla" nombre="IdIdPlantilla" valor="29742b00-897b-4f4e-9a58-4c8c63b9a8d8"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"/>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://unpkg.com/ag-grid-community/dist/ag-grid-community.min.js"></script>
<script src="/utils.js"></script>
<script id="script_initial">$(document).ready(function(event){
utils.initialize()}
);
</script>
<script>var items = document.querySelectorAll('#iepv');
para (var i = 0, len = items.length; i < len; i++) {
(función(){
var columnDefs = [{
Nombre de cabecera: '
Haz
, campo: '
hacer'
,sortable: true, filter: true}
, {
Nombre de cabecera: '
Modelo'
, campo: '
modelo'
,sortable: true, filter: true}
,{
Nombre de cabecera: '
Precio'
, campo: '
Precio'
,sortable: true, filter: true}
];
var rowData = [{
Haz: '
Toyota'
, modelo: '
Celica'
, precio: 35000}
,{
Haz: '
Ford'
, modelo: '
Mondeo'
, precio: 32000}
,{
Haz: '
Porsche
, modelo: '
Boxter'
, precio: 72000}
];
var gridOptions = {
defaultColDef: {
redimensionable: true }
,columnDefs: columnDefs,rowData: rowData};
var gridDiv = document.getElementById('4h942l66s5');
nuevo agGrid.Grid (gridDiv, gridOptions);
}
.bind(elementos[i]))();
}
var items = document.querySelectorAll('#iiih');
para (var i = 0, len = items.length; i < len; i++) {
(función(){
var columnDefs = [{
Nombre de cabecera: '
Haz
, campo: '
hacer'
,sortable: true, filter: true}
, {
Nombre de cabecera: '
Modelo'
, campo: '
modelo'
,sortable: true, filter: true}
,{
Nombre de cabecera: '
Precio'
, campo: '
Precio'
,sortable: true, filter: true}
];
var rowData = [{
Haz: '
Toyota'
, modelo: '
Celica'
, precio: 35000}
,{
Haz: '
Ford'
, modelo: '
Mondeo'
, precio: 32000}
,{
Haz: '
Porsche
, modelo: '
Boxter'
, precio: 72000}
];
var gridOptions = {
defaultColDef: {
redimensionable: true }
,columnDefs: columnDefs,rowData: rowData};
var gridDiv = document.getElementById('l6r4s71nr5');
nuevo agGrid.Grid (gridDiv, gridOptions);
}
.bind(elementos[i]))();
}
</script>
editor.setComponents (cadena HTML); Cambiar 'a' a', como todos los símbolos como < o >están cambiando a navegador sin entender la manera, por favor ayúdame a resolver estoRespuestas (3)
Por favor, alguien me ayude a salir de este problema editor.setComponents (texto html); No funciona el script como se espera tras cargar desde la plantilla guardada en HTML mientras arrastra y solta, funciona después de guardar y volver a cargar ese HTML con editor.setComponents (texto html); Luego el script existente reemplaza símbolos como ' < > por códigos relacionados con el navegador y esto ocurre solo en la versión v0.16.34
No puedes cargar el código HTML generado de nuevo en el editor, leer la documentación sobre cómo almacenar y cargar correctamente las plantillas https://grapesjs.com/docs/modules/Storage.html
Gracias por informar de esto, @nithinpillalamarri123.
Gracias por compartir tu informe sobre Grapes js versión v0.16.34 que da código de script inesperado tras cargar el html guardado. Para ayudar al equipo a investigar y priorizar esto:
Por favor, proporciona:
- Un ejemplo mínimo reproducible (CodeSandbox/JSFiddle)
- Tu GrapesJS número de versión
- Información sobre navegador y sistema operativo
- Cualquier mensaje de error de la consola del navegador
- Pasos para reproducir el problema
Lo que más ayuda:
- Ejemplo de código mínimo (no tu proyecto completo)
- Grabación de pantalla o captura de pantalla que muestra el problema
- Comportamiento esperado frente a comportamiento real claramente indicado
- Configuración GrapesJS que estás usando
Con estos detalles, los mantenedores pueden identificar y priorizar una solución mucho más rápido. El equipo de GrapesJS responde muy bien a los problemas bien documentados.
Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
Issue #5457
Editor congelado en loadProjectData 0.21.7
Versión GrapesJS [X] Confirmo que se debe usar la última versión de GrapesJS ¿Qué navegador usas? Chrome 117.0 Enlace de demo reproducible...
Issue #6152
El CSS añadido mediante código personalizado persiste después de que se elimina un componente de código personalizado
Versión GrapesJS [X] Confirmo que se debe usar la última versión de GrapesJS ¿Qué navegador usas? Cualquiera Enlace de demo reproducible ht...
Issue #5090
La función de script de componentes se ejecuta dos veces después de guardar la página
Versión GrapesJS [X] Confirmo que se debe usar la última versión de GrapesJS ¿Qué navegador usas? 112.0.5615.137 (Construcción oficial) (ar...
Issue #3948
Mis Opciones (en rasgos) para un componente seleccionado se reinician cada vez que recarga la página
Versión GrapesJS [X] Confirmo que se debe usar la última versión de GrapesJS ¿Qué navegador usas? Chrome Enlace de demo reproducible No est...
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.