Añadir múltiples rasgos de tipo de texto
Tengo la solución. Necesitamos extender el texto a máquina en rasgos. Gracias. editor. DomComponents.addType('paraJustify', { isComponent: el => ((el.attributes && el.attributes.paraJustify && el.attributes.paraJustify.value)), extiende: 'texto', modelo: { Predeterminados: { Rasgos: [ { tipo: 'select', Opciones: [ { v...
Lee la respuesta completa abajo ↓Pregunta
Siempre que intento añadir varios rasgos o texto tipográfico con diferentes condiciones y en distintas etiquetas/atributos, solo me queda uno en cada condición de rasgo.
Por favor, ayudadme con la solución.
A continuación se muestra el código
editor. DomComponents.addType('text', {
isComponent: el =>( (el.attributes&&el.attributes.paraJustify&&el.attributes.paraJustify.value) ),
modelo: {
Predeterminados: {
Rasgos: [
{
tipo: 'select',
Opciones: [
{ valor: 'text-align:center', nombre: 'Center' },
{ valor: 'text-align:left ', nombre: 'Left' },
{ valor: 'text-align:right', nombre: 'Right' },
{ valor: 'text-align:justify', nombre: 'Justify' },
],
etiqueta: 'align',
Nombre: 'Style',
},
],
Para que el estilo por defecto.
atributos: { estilo: 'text-align:center' },
},
}
});
editor. DomComponents.addType('text', {
isComponent: el => el.attributes&&el.attributes.bannerBackgroundImage&&el.attributes.bannerBackgroundImage.value,
modelo: {
Predeterminados: {
Rasgos: [
{
tipo: 'select',
Opciones: [
{ valor: 'imagen-fondo:url("https://s.freecharge.in/content/images/egold/egold-banner2.png")', nombre: 'Original' },
{ valor: 'imagen-fondo:ninguno; color-fondo:#ffffff; ', nombre: 'Ninguno' },
],
etiqueta: 'Backgroud Image',
Nombre: 'Style',
},
],
},
}
});
editor. DomComponents.addType('text', {
isComponent: el => el.attributes&&el.attributes.ctaLocation&&el.attributes.ctaLocation.value,
modelo: {
Predeterminados: {
Rasgos: [
{
tipo: 'select',
Opciones: [
{ valor: ' izquierda:0px; derecha:0px; inferior:5px; ', nombre: 'Original' },
{ valor: 'top:0px', nombre: 'Top' },
],
etiqueta: 'ubicación CTA',
Nombre: 'Style',
},
{
tipo: 'select',
Opciones: [
{ valor: 'color-fondo:rojo', nombre: 'Rojo' },
{ valor: 'color-fondo:azul ', nombre: 'Blue' },
{ valor: 'color-fondo:gris', nombre: 'Grey' },
{ valor: 'color-fondo:naranja', nombre: 'Naranja' },
],
etiqueta: 'Color de fondo',
Nombre: 'Style',
cambioprop: 1
},
],
},
}
});Respuestas (1)
Tengo la solución. Necesitamos extender el texto a máquina en rasgos. Gracias.
editor. DomComponents.addType('paraJustify', {
isComponent: el => ((el.attributes && el.attributes.paraJustify && el.attributes.paraJustify.value)),
extiende: 'texto',
modelo: {
Predeterminados: {
Rasgos: [
{
tipo: 'select',
Opciones: [
{ valor: 'text-align:center', nombre: 'Center' },
{ valor: 'text-align:left ', nombre: 'Left' },
{ valor: 'text-align:right', nombre: 'Right' },
{ valor: 'text-align:justify', nombre: 'Justify' },
],
etiqueta: 'align',
Nombre: 'Style',
},
],
Para que el estilo por defecto.
atributos: { estilo: 'text-align:center' },
},
}
});Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
Issue #2785
Añadir varios rasgos de tipo de texto.
Siempre que intento añadir varios rasgos de texto tipográfico con diferentes condiciones y etiquetas distintas, solo hace falta uno en cada...
Issue #1771
Tipo de rasgo: botón que no funciona
Hola, @artf Cuando intento usar rasgos tipo botón. No dispara ninguna función. ¿Podrías ayudarme con esto, por favor? ¿Podrías compartir un...
Issue #3170
Añadir nombre de clase a partir de rasgos
Hola, lo que intento conseguir es que el componente de texto se amplíe asignando un rasgo extra llamado Alineamiento y decidiendo a través...
Issue #3185
[PREGUNTA] ¿Cómo obtener el rasgo del modelo de un componente?
Hola, He añadido un nuevo tipo de "array" al TraitManager. Así que puedo añadir varios subrasgos. En un punto tengo que comprobar los rasgo...
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.