Al hacer clic en 'envolver para estilo' afecta los componentes internos de otros componentes dentro del mismo cuadro de texto
RTE depende del contenido del DOM durante la edición, así que si lo eliminas deliberadamente con algo como '''js onRender() { this.el.innerHTML = this.model.get("displayedText") }, ``` Los componentes interiores se eliminarán una vez terminada la edición.
Lee la respuesta completa abajo ↓Pregunta
Versión GrapesJS
- Confirmo que se debe usar la última versión de GrapesJS
¿Qué navegador usas?
Chrome 104.0.5112.101
Enlace de demo reproducible
https://jsfiddle.net/7cLr0xt2/3/
Describe el bicho
¿Cómo reproducir el bicho? Por alguna razón no puedo reproducir el error dentro del fiddle enlazado arriba, ya que la línea 34 'selectedComponent.components('<span liquid="if contact.id">jhbjhhgjjh</span> <span liquid="else">qwewqeqwe</span>')' no reemplaza los componentes internos del componente, así que tendré que compartir un vídeo de lo que ocurre con mi proyecto, pero los pasos son los siguientes:
- Haz doble clic en 'Hola Mundo!! 'cuadro de texto y seleccionar la palabra 'Mundo'
- Haz clic en el botón de pincel en el editor RTE para envolver esa palabra para estilismo
- Haz clic en el botón 'si' rodeado en el extremo izquierdo de la barra de componentes y haz clic en 'ok' en el diálogo que aparece para convertir esto en un componente de 'texto condicional'
- Haz doble clic en el nuevo componente 'Abrir condicionales para elegir' (normalmente esto abriría un diálogo, pero he simplificado para este error, así que ahora solo aplica información ficticia al componente, incluyendo añadir un atributo y cambiar los componentes internos del componente). Cambiar los componentes interiores no funciona en este instrumento, no sé por qué)
- Haz clic en el botón 'ver código' para ver los cambios que esto ha hecho en el código; como puedes ver, ha insertado el atributo 'liquidtag="if', pero los componentes internos no aparecen. En mi proyecto, los componentes internos de este span serían '<span liquid="if contact.id">jhbjhhgjjh</span> <span liquid="else">qwewqeqwe</span>'
- Cierra el cuadro de diálogo 'ver código' y haz doble clic en la palabra 'Hola' para seleccionarla
- Haz clic en el botón del pincel en el editor RTE para envolver esa palabra para el estilo
- Haz clic de nuevo en el botón 'ver código': en mi proyecto, los componentes internos (es decir, '<span liquid="if contact.id">jhbjhhgjh</span> <span liquid="else">qwewqeqwe</span>') del primer componente que creamos en el paso (4) ahora desaparecen (aunque los atributos permanecen)
¿Cuál es el comportamiento esperado? Envolver una palabra para estilizar no debería cambiar los componentes internos de otros componentes de esa div. Presumiblemente esto se debe a cómo funciona el 'wrap for style'; quizás establece el HTML interno de ese componente igual que el HTML interno de la vista del componente.
¿Cuál es el comportamiento actual? Los componentes internos '<span liquid="if contact.id">jhbjhhgjjh</span> <span liquid="else">qwewqeqwe</span>' establecidos en el paso 5 desaparecen y se reemplazan por la propiedad 'displayedText' cuando otra palabra del cuadro de texto original se envuelve para el estilo. Creo que podría tener que ver con las líneas 85 - 87 en el violín, pero hasta donde entiendo esto solo debería afectar a la vista y, por tanto, a cómo aparece dentro del lienzo, no al HTML subyacente del componente.
Aquí tienes un vídeo que muestra lo que ocurre en mi proyecto:
Código de conducta
- Acepto seguir el Código de Conducta de este proyecto
Respuestas (4)
RTE depende del contenido del DOM durante la edición, así que si lo eliminas deliberadamente con algo como '''js onRender() { this.el.innerHTML = this.model.get("displayedText") },
Los componentes interiores se eliminarán una vez terminada la edición.
Vale, gracias @artf, tiene sentido.
Sin embargo, esas líneas de código, junto con
init() {
this.listenTo(this.model, "change:displayedText", this.render)
},
se requiere renderizar el estado seleccionado correcto dentro del lienzo de la siguiente manera (tanto al renderizar inicialmente el componente como cuando el usuario selecciona un estado 'if' diferente, cambiando así 'displayedText'):
¿Se te ocurre alguna forma de conservar los componentes internos después de editar mediante RTE? ¿Quizá podría almacenar estos componentes internos dentro de una propiedad del propio componente 'texto-condicional' y asignarlos también durante 'onRender()'? Si eso es posible, ¿cómo puedo establecer la propiedad 'components' del componente dentro del gancho 'onRender()'?
¡Gracias por tu ayuda!
Necesito hacer más pruebas, pero parece que he solucionado este comportamiento guardando los componentes internos dentro del propio componente al crearlo o editarlo, y luego usar el gancho 'rte:disable' de la siguiente manera:
editor.on('rte:disable', () => {
const conditionalComponents = (editor.getSelected().components().filter((component) => {
return component.attributes.type == 'texto-condicional'
}))
conditionalComponents.forEach((component) => {
component.components(component.attributes.conditionCode)
})
});
Parece un poco improvisado, así que si se te ocurre una forma mejor, por favor házmelo saber.
Gracias por informar de esto, @benryanwilliams.
Buena pregunta sobre Hacer clic en el botón 'envolver para estilo' afecta a los componentes internos de otros componentes dentro del mismo cuadro de texto. 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 #5990
Cuando eliminas un componente, las clases duplicadas entre componentes se eliminan.
Versión GrapesJS [X] Confirmo que se debe usar la última versión de GrapesJS ¿Qué navegador usas? Chrome 126.0.6478.127 (Windows) Enlace de...
Issue #6096
La caja redimensionable desaparece al volver a seleccionar componentes
Versión GrapesJS [X] Confirmo que se debe usar la última versión de GrapesJS ¿Qué navegador usas? Chrome Enlace de demo reproducible https:...
Issue #4754
Etiqueta de cierre '</script>' no escapada para propiedades del script
Versión GrapesJS [X] Confirmo que se debe usar la última versión de GrapesJS ¿Qué navegador usas? Versión de Chrome 107.0.5304.122 (64 bits...
Issue #5274
Error de análisis dentro de Remix
Versión GrapesJS [X] Confirmo que se debe usar la última versión de GrapesJS ¿Qué navegador usas? Chrome v114 Enlace de demo reproducible h...
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
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
Big Updates: TinyMCE 8 and Placeholder 2.0 for GrapesJS
In May we shipped major updates to two of our most popular GrapesJS plugins — TinyMCE Inline Text Editor and Placeholder.
Tutorial
Find the Right GrapesJS Plugin in Seconds: Smarter Discovery Is Live
We're shipping a set of discovery upgrades. New label filters, a proper compatibility switch for GrapesJS vs Studio, one-click and a smarter sort bar.
Explorar categorías de plugins
Ve directamente a las páginas de categorías de plugins en el marketplace.