Cómo cambiar tagName usando rasgos.
Lo solucioné después de buscar un poco en internet. Añade este rasgo '''js Rasgos: [ { tipo: 'select', Opciones: [ { valor: 'h1', nombre: 'Rumbo 1' }, { valor: 'h2', nombre: 'Rumbo 2' }, { valor: 'h3', nombre: 'Rumbo 3' }, { valor: 'h4', nombre: 'Rumbo 4' }, { valor: 'h5', nombre: 'Rumbo 5' }, { valor: 'h6', nombre: '...
Lee la respuesta completa abajo ↓Pregunta
Hola, Quiero lograr esto: Cuando el usuario hace clic en una etiqueta de encabezado H1, H2, H3 ... Quiero que aparezca un rasgo (de tipo select / desplegable) que permita cambiar la etiqueta Name del encabezado
Respuestas (3)
Lo solucioné después de buscar un poco en internet. Añade este rasgo '''js Rasgos: [ { tipo: 'select', Opciones: [ { valor: 'h1', nombre: 'Rumbo 1' }, { valor: 'h2', nombre: 'Rumbo 2' }, { valor: 'h3', nombre: 'Rumbo 3' }, { valor: 'h4', nombre: 'Rumbo 4' }, { valor: 'h5', nombre: 'Rumbo 5' }, { valor: 'h6', nombre: 'Rumbo 6' }, ], etiqueta: 'Tamaño', nombre: 'etiquetaNombre', cambioProp: 1, }, ],
@hosseinghs probar esto. Esto es igual que @TheComputerM implementaba el código antes. Y funciona bien.
'''s this.editor.Components.addType('headings', { isComponent: el => el.tagName.startsWith('H') && Number.parseInt(el.tagName.slice(1)) <= 6, modelo: { Predeterminados: { Rasgos: [ { tipo: 'select', Opciones: [ { id: 'h1', valor: 'h1', nombre: 'Rumbo 1' }, { id: 'h2', valor: 'h2', nombre: 'Rumbo 2' }, { id: 'h3', valor: 'h3', nombre: 'Rumbo 3' }, { id: 'h4', valor: 'h4', nombre: 'Rumbo 4' }, { id: 'h5', valor: 'h5', nombre: 'Rumbo 5' }, { id: 'h6', valor: 'h6', nombre: 'Rumbo 6' }, ], etiqueta: 'Tamaño', nombre: 'etiquetaNombre', cambioProp: cierto, }, ], }, }, });
Hola, ¡yo intento hacer lo mismo! Mi problema es que cuando hago clic en una de las opciones de Rasgos, ¡mi elemento de encabezado no se actualiza a un nuevo encabezado! ¿Puedes ayudarme?
Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
Issue #3019
[PREGUNTA] - Vincular texto/html interno (como div, p, h1) a Trait
¡Hola! He creado un rasgo personalizado y quiero que me permitan cambiar el contenido de las etiquetas (en este caso es una etiqueta H1) ba...
Issue #1780
Cómo cambiar el desplegable extra para el rasgo de cambio de enlace
Hola @artf, Quiero dar una funcionalidad más al usuario, como que el usuario pueda cambiar cualquier enlace con el desplegable de enlaces p...
Issue #1121
[INSECTO] - <Tbody> dentro <Table>
Hola @artf, Creé un nuevo componente con 'tagName = 'table''. Cuando se selecciona y se hace clic en una opción de su barra de herramientas...
Issue #2136
[PREGUNTA] Tipo de componente personalizado no encontrado y rasgos que no funcionan tras cargar la página
Hola @artf He creado un componente personalizado muy básico llamado 'customsection' que usa rasgos para cambiar el color de fondo del compo...
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.