Issue #511💬 RespondidoAbierto el 13 de noviembre de 2017por bungambohlahReacciones 2

No se puede editar el contenido después de actualizarlo mediante la API del gestor de bloques

Respuesta rápidapor artf1

@edwardjiawei simplemente cambiar 'contenido' (usado solo para contenido de texto) por 'componentes' '''js de contenido: '<td class="cell">...', a componentes: '<td class="cell">...', ``` @bungambohlah No deberías hacer esto 'el.insertAdjacentHTML( 'beforeend', contentDynamic );' Si cambias el DOM, también quitas los...

Lee la respuesta completa abajo ↓

Pregunta

Hola @artf perdón por mi último problema, debo crear un nuevo problema, mi problema tiene un error como este

EDITO: perdón, acabo de arreglar mi último problema con el script: '''javascript Navegación dinámica blockManager.add('dynamic-nav', { etiqueta: 'Navegación Dinámica', atributos: { Clase: 'fa fa-ellipsis-h', título: 'Insertar menú dinámico de navegación' }, categoría: 'Sección', contenido: '<div id="dynamic-nav-wrapper" class="nav-wrapper" data-section-type="dynamic-menu-nav"> <a href="index.html" class="logo-marca"><img src="imágenes/logo.png"></a> <a href="index.html" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a> <ul id="dynamic-page" class="right hide-on-med-and-down"></ul> <script> $(función() { var item = document.getElementById("dynamic-page"); si (!ítem) regresa;

(función(){ const el = esto; var contentDynamic = ""; $.ajax({ tipo: "GET", URL: "/dev/editor/dynamicnav", éxito: función(páginas) {

para (var i = 0; i < páginas.longitud; ++i) { console.log(páginas[i]); if (pages[i].uuid == "<%= page.uuid %>") { contentDynamic += '<li class="current"><a href="\${pages[i].url}">${pages[i].menu_name}</a></li>'; } else { contentDynamic += '<li><a href="\${pages[i].url}">${pages[i].menu_name}</a></li>'; } }

el.insertAdjacentHTML( 'anteantetermin', contentDynamic ); console.log(el.getElementsByTagName("li").length); }, error: function(err) { consola.error(err); } }); }.bind(ítem))(); }); </guion> '</div> });

**Guion actualizado**
Pero el contenido (solo el elemento de enlace) no puede editar ni añadir algún componente con grapesjs, ¿cómo arreglar eso?
Gracias @artf :+1: 

Respuestas (3)

artf15 de noviembre de 2017

@edwardjiawei simplemente cambiar 'contenido' (usado solo para contenido de texto) por 'componentes' '''js de contenido: '<td class="cell">...', a componentes: '<td class="cell">...',

@bungambohlah 
No deberías hacer esto 'el.insertAdjacentHTML( 'beforeend', contentDynamic );'
Si cambias el DOM, también quitas los modelos adjuntos
Si necesitas reemplazar el DOM y aún así poder seleccionar este nuevo contenido, tienes que hacerlo a nivel de modelo (por ejemplo, 'model.components('<div>...')'), si no, simplemente no tiene sentido
bungambohlah16 de noviembre de 2017

Muchas gracias@artf tengo alguna idea y un poco complicado de qué hacer a nivel modelo, muchas gracias, me has salvado el día :rofl:

edwardjiawei15 de noviembre de 2017

Problema similar, el elemento anidado no se detecta

Para configurar un flujo sencillo para arrastrar y soltar tabla, para que el usuario pueda arrastrar el bloque de fila y crear la tabla de la segunda fila, pero el td en la fila no sea editable, ni seleccionable para el estilizado

    bm.add('Table', {
      etiqueta: 'Mesa',
      categoría: 'Formas',
      Atributos: {Clase:'FA FA-MAP-O'},
      Contenido: {
        tipo: 'mesa',
        estilo: {ancho: '100%'},
        columnas: 2,
        Filas: 1, 
      },
    });
  }

bm.add('TableRow', {
      etiqueta: 'TableRow',
      categoría: 'Formas',
      Atributos: {Clase:'FA FA-MAP-O'},
      Contenido: {
        Tipo: 'Row',
        Clases: ['Tabla de Rueda'],
        contenido: '<td class="cell">No editable, no estilizado desde Decoration</td><td class"cell">No editable, no estilizado desde Decoration</td>'
        Estilo: {Altura: '75px'} //Acolchado 10
      },
        removible: cierto,
        Arrastrable: Cierto,
        Droppable: Cierto,
        Badgable: Cierto,
        Estilizado: Cierto,
        Resaltable: Cierto,
        Copiable: Cierto,
        redimensionable: cierto,
        Editable: Cierto

});

Preguntas y respuestas relacionadas

Continúa investigando con debates sobre temas similares.

Plugins de pago que cumplen con este problema

Seleccionado por temas clave y relevancia de etiquetas para ayudarte a enviar más rápido.

Ver todos los plugins

Cargando recomendaciones de plugins de pago...

Opción gratuita

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 →
Opción premium

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.

Todos los tutoriales →

Explorar categorías de plugins

Ve directamente a las páginas de categorías de plugins en el marketplace.