¿Cómo cambiar dinámicamente los DomComponents?
No necesitas ampliar el modelo de esta manera '''js var content = response.data; var originalMap = comps.getType('dynamic'); originalMap.model.extend ({ ... toHTML: función () { ... } })
Lee la respuesta completa abajo ↓Pregunta
Hola, gracias por esta gran biblioteca, estoy trabajando con un sistema de boletines que obtiene contenido de la base de datos y genera los últimos artículos del sitio. He creado un bloque dinámico con tipo dinámico que tiene la opción source. Cuando el usuario añade el código, envía una petición a la URL y debería obtener el contenido de la que cambia el bloque por el contenido de la solicitud.
DomComponents
'''javascript
comps.addType('dynamic', { model: defaultModel.extend({ defaults: Object.assign({}, defaultModel.prototype.defaults, { etiquetaNombre: 'div', clase: 'contenido dinámico', Badgable: Cierto, Resaltable: Cierto, Editable: Cierto, Droppable: falso, Arrastrable: Cierto, removible: cierto, rasgos: [{ Tipo: 'URL', etiqueta: 'Fuente', Nombre: 'Source', }], }),
updated(property, value, prevValue) { if(value.source != null) { axios.get(value.source).then(function(response) { var content = response.data; var originalMap = comps.getType('dynamic'); originalMap.model.extend ({ Anular cómo se renderiza el componente a HTML toHTML: function () { devolver contenido; } }) console.log(originalMap.view.extend({
})) }).catch(función(error) { console.log(error) }) }
}, Barra de herramientas: [ { Atributos: {Clase: 'FA Fa-flechas'}, comando: 'importar-contenido', } ], },
{ isComponent(el) { if (el.tagName == 'DIV' && el.dataset.dynamic == "1") { return {type: 'dynamic'}; } }, }),
Definir la vista view: defaultView.extend({
eventos: { 'keydown': función(e) { if (e.key == 'Retroceso') { e.objetivo.padreNode.removeChild(e.target); } } } }), });
**Bloquear**
'''javascript
blockManager.add('dynmaic', {
id: 'Dynmaic',
etiqueta: 'Contenido Dynmaic',
categoría: 'Extra',
Textible: 1,
Atributos: {clase: 'FAB-3x FA-REACT'},
Vacío: Cierto,
Resaltable: Cierto,
Arrastrable: Cierto,
Droppable: Cierto,
removible: cierto,
Editable: Cierto,
Contenido: {
tipo: 'dinámico',
atributos: {
'dinámico de datos': 1,
Valor: 'dinámico'
}
},
});
Respuestas (2)
No necesitas ampliar el modelo de esta manera '''js var content = response.data; var originalMap = comps.getType('dynamic'); originalMap.model.extend ({ ... toHTML: función () { ... } })
puedes simplemente actualizar el método a HTML si la instancia actual, por ejemplo.
'''js
editor.getSelected().toHTML = () => nuevoContenido;
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 #1788
[PREGUNTA] ¿Cómo añadir dinámicamente recursos desde el servidor después de la inicialización del editor?
¡Hola! ¡Gracias por el trabajo que has hecho construyendo esta biblioteca tan chula! Estoy usando la última versión de Angular y me quedo c...
Issue #1748
Cómo evitar que los elementos arrastren dentro del editor
Hola @artf Lo estás haciendo muy bien con grapesjs y es extremadamente útil hacer que nuestra funcionalidad sea más fácil de usar. Gracias...
Issue #1583
[Pregunta] Modificando el urlStore y el urlLoad dinámicamente.
Hola a todos Me está encantando Grapesjs hasta ahora, gracias por todo tu trabajo en él. Estoy intentando configurar el almacenamiento de p...
Issue #1535
[Bug]: Después de eliminar un componente personalizado, la vista del rasgo no se limpia
Hola, Estoy usando la biblioteca grapesjs versión 0.14.33. He creado algunos componentes personalizados y he notado que al eliminar los com...
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.