El valor del componente no cambia
Gracias por informar de esto, @Abhisheknanda1344463. Buena pregunta sobre El valor de los componentes no está cambiando. El enfoque recomendado con ProseMirror es usar la API orientada a eventos. Empieza aquí: Consulta la documentación de GrapesJS de tu módulo específico Busca el método del oyente de eventos 'on()' La...
Lee la respuesta completa abajo ↓Pregunta
Hola @artf
He añadido un nuevo componente
Aquí está el código
'''js
editor. DomComponents.addType('header', {
modelo: {
Predeterminados: {
etiquetaNombre: 'h1',
tipo: 'cabezal',
Tamaño: 'H1',
Rasgos: [
{
Nombre: 'Size',
etiqueta: 'Tamaño',
tipo: 'select',
cambioProp: 1,
Opciones: [
{valor: 'h1', nombre: 'One'},
{valor: 'h2', nombre: 'Dos'},
{valor: 'h3', nombre: 'Tres'},
]
}
],
contenido: 'Inserta aquí tu texto de cabecera'
},
init(){
esto.escucha(esto, 'cambio:tamaño', esto. Updatehead);
},
Updatehead(){
var newElem = $('<'+this.changed['size']+ ' />').append(this.view.el.innerText);
console.log(newElem.html());
this.view.model.set('content',newElem.html());
this.view.el.innerHTML = newElem.html();
this.attributes.tagName = this.changed['size'];
this.attributes.size = this.changed['size'];
}
}
});
Bloque para el tipo de cabecera bm.add('header', { etiqueta: 'Cabezal', media: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M8.3 11.5h7.4V6.9l-.2-1.6a1 1 0 00-.5-.5c-.3-.2-.7-.3-.3h-.6v-.4h6.8v.4h-.6c-.4 0-.7.1-1 .3a1 1 0 00-.6.6L18 6.9v10.3c0 .8 0 1.3.2 1.6 0 .2.2.3.4.5.4.4.4.4.4.4.4.4.4.4.4.4.4 2.7.3 1.1.3h.6v.4h-6.8v-.4h.5c.7 0 1.2-.2-.2 1.5-.6.2-.3.3-.9.3-1.8v-4.9H8.3v4.9l.1 1.6.5.5c.3.2.7.3 1 .3h.7v.4H3.7v-.4h.6c.7 0 1.1-.2 1.4-.6.2-.3.3-.9.3-1.8V6.9L6 5.3a1 1 0 00-.5-.5l-1-.3h-.7v-.4h6.9v.4H10c-.4 0-.8.1-1 .3a1 1 0 00-.6.6l-.1 1.5v4.6z"></path>',</svg> Contenido: { tipo: 'cabezal', estilo: { "familia de fuentes": 'Helvetica' }, }, Categoría: { Sello: selection_category, } });
al seleccionar las etiquetas h1 y h2 cambia el valor en la sección HTML, como puedes ver en el vídeo, pero el contenido no se actualiza según la etiqueta.
¿Podrías ayudarme con esto, por favor? Gracias
https://user-images.githubusercontent.com/20657737/104281764-03e3e900-54d4-11eb-9b7d-959be8efa45a.mov
Respuestas (1)
Gracias por informar de esto, @Abhisheknanda1344463.
Buena pregunta sobre El valor de los componentes no está cambiando. El enfoque recomendado con ProseMirror es usar la API orientada a eventos.
Empieza aquí:
- Consulta la documentación de GrapesJS de tu módulo específico
- Busca el método del oyente de eventos 'on()'
- La mayoría de las operaciones se pueden realizar escuchando eventos del editor y de los componentes
Patrones comunes: '''javascript Prestad atención a los cambios editor.on('Change', () => console.log('Something Changed'));
Ciclo de vida de los componentes editor.on('component:mount', (c) => console.log('component ready', c)); editor.on('component:update', (c) => console.log('component updated', c));
**Si sigues atascado:**
- Compartir una reproducción mínima de CodeSandbox
- Incluye lo que ya has probado
- Menciona tu versión GrapesJS
- ¡La comunidad está aquí para ayudar!
Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
Issue #3225
¿Cómo actualizar el estilo a partir de un rasgo de casilla?
Hola @artf Estoy intentando actualizar el estilo usando el rasgo de casilla, pero no llama a la función. Aquí está el código ¡Agradezco muc...
Issue #3335
Creando rasgo con la interfaz de propiedad del Style Manager
Tengo un componente que usa la propiedad 'background-url' del Style Manager: Me gustaría reutilizar esta interfaz que aparece en el Style M...
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 #3137
Cuando selecciono un elemento en particular, no obtengo sus estilos. Este problema solo ocurre con algunos elementos.
No captando estilos del elemento seleccionado Aquí está mi código, Modelo const = editor. StyleManager.getModelToStyle(component); sea styl...
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.
Tutorial
Ship to Production Faster: What’s New in GrapesJS Shadcn
Supercharge your page builder! GrapesJS Shadcn adds live drag previews, rich text / commands, dynamic data, and canvas presets to ship to prod faster.
Tutorial
How to Build a Production GrapesJS Editor: The Complete Walkthrough of Brief, Preset, Plugins, and Services
A complete walkthrough of building a production GrapesJS editor: how to choose a preset, pick plugins, and scope setup services without burning a sprint.
Tutorial
Embed GrapesJS in Your SaaS: A Weekend Guide
Embed GrapesJS in your SaaS and ship a white-label page builder over a weekend. Honest tradeoffs, real code, and the plugins that close the UX gap.
Explorar categorías de plugins
Ve directamente a las páginas de categorías de plugins en el marketplace.