Añadir Rasgo (atributo) por defecto al modelo para todos los componentes HTML (elementos)
Hola @kewilson, Tienes varios enfoques diferentes para lograr esto... si cada componente necesita este rasgo personalizado, probablemente anularía el método 'inicializar' del tipo de componente por defecto y lo añadiría allí. Algo así: Alternativamente, podrías permitirte simplemente añadir tu rasgo que el componente...
Lee la respuesta completa abajo ↓Pregunta
Hola,
He leído las wikis de Traits, Components y API, he recopilado todos los temas abiertos y cerrados. Incluso he encontrado el código donde creas los valores predeterminados (ID, Título, Alt) que tienes hoy. Se han hecho preguntas similares, pero ninguna responde a la pregunta principal.
Para cada componente HTML quiero añadir otro atributo predeterminado (rasgo) además de los atributos predefinidos (ID, Título, Alt, etc.). Esto incluye añadir el nuevo rasgo a flexboxes, divs, entradas, imágenes, etc., de modo que cuando se selecciona Configuración veamos (usando el tipo de texto como ejemplo):
ID [Texto provisional] Título [Texto provisional] AtributoLoco [Texto marcador] <<<==== Ejemplo de nuevo atributo predeterminado (rasgo)
Según algunas respuestas a los problemas, así como en tu página de la wiki de Rasgos, los ejemplos de rasgos giran en torno a añadir un nuevo componente, cosa que no quiero hacer; quiero que todos los componentes existentes hereden el nuevo atributo aunque hoy no tengan uno.
No me queda claro en los ejemplos mostrados en la wiki de Rasgos cómo simplemente añadiría otro rasgo predeterminado al modelo para que se aplique a todos los componentes.
Por ejemplo, <section class="flex-sect" CrazyAttribute="SomeValue"> ... </section>
Cualquier orientación sería muy apreciada.
¡Gracias!
Respuestas (3)
Hola @kewilson,
Tienes varios enfoques diferentes para lograr esto... si cada componente necesita este rasgo personalizado, probablemente anularía el método 'inicializar' del tipo de componente por defecto y lo añadiría allí. Algo así:
var defaultType = editor. DomComponents.getType("default");
var _initialize = defaultType.model.prototype.initialize;
defaultType.model.prototype.initialize = function() {
_initialize.aplicar (esto, argumentos);
this.get("traits").add({
Tipo: "entrada",
etiqueta: "Atributo Loco",
Nombre: "Data-crazy"
});
};
Alternativamente, podrías permitirte simplemente añadir tu rasgo que el componente 'predetermine':
editor. DomComponents.getType("default").model.prototype.defaults.traits.push({label: "Crazy Attribute", nombre: "data-crazy"})
Hola@ryandeba muchas gracias por las sugerencias. Puse el segundo y funciona, bueno, para los valores predeterminados, como cabría esperar. Bloques como enlace, imagen, entrada, por nombrar algunos, no añaden el atributo, pero esos deben clasificarse de forma diferente. No obstante, un éxito en general para mí.
Gracias de nuevo, lo agradezco mucho.
@kewilson podrías ayudarme a añadir otro rasgo por defecto en un componente específico?
Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
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 #1888
[Pregunta] Añadir html personalizado dentro de Canvas
Hola, Estoy usando uvas para exportar un json personalizado con toda la información que necesito, en lugar de HTML y CSS. Para hacer eso, e...
Issue #1588
[PREGUNTA]
¡Hola a todos y gracias por vuestro magnífico trabajo y por esta API! Tengo una pregunta sobre la caja, que envuelve todos los componentes...
Issue #689
Cambia el valor del atributo que se transmite a través de los rasgos
Hola @artf ¿Existe algún método para manipular el valor de entrada de un atributo que se pasa a través de rasgos? Por ejemplo, pasé el valo...
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.