Añadir nuevos componentes a los existentes
Desafortunadamente, no conozco una forma sencilla de obtener un objeto componente específico sin iterar recursivamente por ellos para encontrar el que quieres, ¡pero suena como una gran idea! Quizá puedas hacer algo así para obtener todos los componentes y luego filtrar el que quieras (este código no está completament...
Lee la respuesta completa abajo ↓Pregunta
Hola,
Me gustaría preguntar si existe algún soporte o API existente para añadir nuevos componentes a una lista de componentes existente (por ejemplo, después de obtenerlos o generarlos dinámicamente). Estoy hablando de algo así:
editor.addComponent({
padre: 'parent_id',
componente: '<p>Nuevo componente hijo</p>'
})
He estudiado la documentación y lo más parecido que he encontrado es la función ''add Components()'''. Desafortunadamente, esta función no especifica ningún objetivo donde deba colocarse el nuevo componente.
Pregunto esto porque mi intención es usar GrapesJS de forma colaborativa en tiempo real y enviar toda la representación HTML de un lado a otro tras cada acción del usuario es demasiado lento.
Un cordial saludo, Michal
Respuestas (3)
Desafortunadamente, no conozco una forma sencilla de obtener un objeto componente específico sin iterar recursivamente por ellos para encontrar el que quieres, ¡pero suena como una gran idea!
Quizá puedas hacer algo así para obtener todos los componentes y luego filtrar el que quieras (este código no está completamente probado, pero espero que te ayude a empezar en la dirección correcta si te quedas atascado):
function getAllComponents(component) {
componente = componente || editor. DomComponents.getWrapper();
var components = component.get("components").models;
component.get("components").forEach(function(component) {
components = components.concat(getAllComponents(component));
});
componentes de retorno;
};
'getAllComponents().filter(function(component) { return component.cid == "someID"; } )[0]'Gracias por vuestras respuestas, creo que mi pregunta ya está respondida y no hay mucho más que añadir. Voy a cerrar esto ahora, sin embargo, el método 'find()' sería una adición bienvenida a este increíble framework.
Hola @baxxos,
¿Estás intentando hacer algo así: https://jsfiddle.net/ztqsugaw/3/?
Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
Issue #1623
Mismo diseño para todos los bloques
Hola @artf, esto en realidad no es un error, pero me gustaría preguntar Si existe algo como el diseño global para cada bloque. por ejemplo,...
Issue #1113
[PREGUNTAS] ¿El nuevo tipo de rasgo no funciona con los componentes renderizados?
Hola, gracias por el excelente marco. Estoy intentando aplicar esto a mi proyecto. Quiero añadir un nuevo rasgo para el componente existent...
Issue #1671
[Pregunta] Añadir html una vez que el canvas esté borrado.
Hola Artur Me gustaría añadir algo de código html por defecto cuando los usuarios pulsen el botón de borrar. Por ejemplo, una sección por d...
Issue #857
[Pregunta]: ¿Cómo añado una fuente personalizada en la Tipografía | ¿Desplegable de fuentes?
Hola, Para empezar, esto es lo que llevo mucho tiempo buscando, así que gracias por vuestro esfuerzo. A continuación, me gustaría añadir un...
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.