Enriquecer cualquier componente con las expresiones if del lado del servidor o foreach (concretamente, MVEL)
Para rodear un elemento, mira 'toHtml', puedes buscarlo en los archivos para ver ejemplos. En cualquier caso, no creo que sea buena idea reemplazar el tipo de componente por defecto, sugeriría crear un nuevo componente que extienda el tipo por defecto y usar 'isComponent' para determinar cómo se asigna. La documentaci...
Lee la respuesta completa abajo ↓Pregunta
Estoy investigando cómo crear una plantilla con expresiones del lado del servidor que repita un componente ('foreach') o lo elimine completamente ('if'). Mi backend analiza plantillas con mvel.
Lo que estoy pensando es añadir un par de ajustes a todos o algunos elementos seleccionados. Por ejemplo, a una '<div>' de una celda, así que se ve así:
<div mvel-foreach="item : people" class="cell" id="iuck"> .... Algunos contenidos se lanzaron inside...@{ítem.apelido}... ... etcétera, etc </div>O a un Texto ('mvel-ending' inserta un separador entre elementos):
<div mvel-ending="', '" mvel-foreach="item : people" id="iohm">@{item.apelapelido}</div>Después de eso, planeo hackear un postprocesador que rodee los elementos repetitivos con expresiones reales de mvel:
@foreach{ítem : personas}<div id="iohm">@{item.apelapelido}</div>@end{', '}
Mi postprocesador sucio será responsable de la sustitución inversa de expresiones por atributos de etiqueta antes de cargar la plantilla en el editor GrapesJs con el método 'setComponents'.
Así que la pregunta N1 es lo que me falta, ¿hay una mejor manera de rodear algunos elementos selectos (o todos) con expresiones del lado del servidor que en realidad no son etiquetas?
La pregunta N2 es: ¿cómo puedo añadir realmente esos ajustes a todos o algunos elementos? Estaba leyendo la documentación y decidí que si actualizo el tipo de componente raíz llamado "default", añadiré mis 3 campos a todos los editores de elementos, así que he hecho esto:
var editor = grapesjs.init({ Altura: '100%', contenedor: editorDiv, showOffsets: cierto,
fromElement: false,
avisoOnUnload: falso,
storageManager: false,
Plugins: ['GJS-preset-webpage'],
lienzo: {
Estilos: [
'w3.css'
]
}
});
const mvelModel = {
modelo: {
Predeterminados: {
Rasgos: [
'mvel-si',
'mvel-foreach',
'final mvel',
]
}
}
};
editor. DomComponents.addType('default', mvelModel);
Esto resultó ser incorrecto: solo se actualizaron las celdas en columnas del conjunto básico de bloques, y mis campos _reemplazaron_ los campos de configuración estándar en lugar de estar _merged_, así que obviamente me estoy perdiendo cómo los tipos de componentes se extienden entre sí y cómo fusiono mis rasgos con los componentes.Respuestas (3)
Para rodear un elemento, mira 'toHtml', puedes buscarlo en los archivos para ver ejemplos.
En cualquier caso, no creo que sea buena idea reemplazar el tipo de componente por defecto, sugeriría crear un nuevo componente que extienda el tipo por defecto y usar 'isComponent' para determinar cómo se asigna. La documentación de components podría ser útil
La documentación de los componentes podría ser útil
He escrito mi código basándome en este artículo. Dice,
Actualizar los tipos de componentes es bastante sencillo, veamos cómo: .... La propiedad de 'defaults' se maneja de forma diferente y se fusionará con los antiguos 'predeterminados'
Así que estoy actualizando, no el tipo de componente por defecto, sino un tipo simple de componente "entrada" con esto:
const mvelModel = {
modelo: {
Predeterminados: {
Rasgos: [
'mvel-si',
'mvel-foreach',
'final mvel',
]
}
}
};
editor. DomComponents.addType('input', mvelModel);
Aun así, en lugar de *fusionar* los nuevos rasgos, *reemplaza* los rasgos previamente definidos de la entrada por los nuevos.
¿Alguna idea de cómo _añadir_ elementos de configuración a un tipo de componente existente? ¿O al menos cómo recuperar los rasgos existentes? Actualizar los tipos de componentes satisfará mis necesidades sin extenderlos todos y duplicar el número de esos tipos@fedd puedes añadir tus nuevos rasgos en la función 'model.init'
Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
Issue #2549
[PREGUNTA] Actualizar vista de componentes al cambiar la propiedad
Hola a todos, Estoy intentando crear un componente que actualice su vista en función del valor de una propiedad '''javascript editor. DomCo...
Issue #2799
[Preguntas] Ordenación del selector con id y selectores de clase, espacio después del selector de id
Actualmente estoy trabajando en una aplicación web para la que integramos este proyecto como editor de interfaz gráfica para personalizar l...
Issue #2824
¿Los objetos arrastrados no se posicionan con la resistencia inicial?
Así que cuando arrastro un componente o objeto desde la barra hasta el centro, no va a donde le dije... ¿Siempre va aproximadamente un 20%...
Issue #2076
[PREGUNTA] ¿Cómo crear un nuevo componente que permita directivas de la hoja Laravel?
Hola, gracias por el buen trabajo. Me gustaría saber si hay alguna forma de usar las directivas de las cuchillas dentro del código. Ya añad...
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.