Issue #2610💬 RespondidoAbierto el 28 de febrero de 2020por AbdiasMReacciones 0

El estilo se pierde al deseleccionar un componente al usar el método rte.exec

Respuesta rápidapor AbdiasM

¿Alguien?

Lee la respuesta completa abajo ↓

Pregunta

Hola @artf,

Al configurar el color de fondo/precolor (o cualquier otro formato como tamaño de fuente, etc.) usando la barra de herramientas RichTextEditor, el formato se pierde al deseleccionar > seleccionar y deseleccionar el componente de nuevo. Por favor, consulta la demo sobre Code Pen - https://codepen.io/AbdiasM/pen/LYVydpr Además, la barra de herramientas RTE no vuelve a aparecer al entrar en modo edición.

Pasos para reproducirse:

  1. Eliminar un bloque de texto
  2. Haz doble clic en el bloque de texto y selecciona algo de texto (por ejemplo, aquí)
  3. Haz clic en el último icono de la barra de herramientas RTE y establece el color trasero Observa: Se aplica el color de fondo
  4. Haz clic fuera del bloque de texto
  5. Haz doble clic en el bloque de texto para entrar en modo edición
  6. Haz clic fuera del bloque de texto otra vez Observar: Se ha perdido el color de fondo
  7. Haz doble clic dentro del bloque de texto otra vez Observa: la barra de herramientas RTE no aparece

¿Podríais echar un vistazo a esto, por favor? Esto es bastante crucial.

Respuestas (3)

AbdiasM6 de marzo de 2020

¿Alguien?

AbdiasM18 de marzo de 2020

Solucioné esto ajustando

avoidInlineStyle: 0,

Fragmento de códigoTEXT
forceClass :0,
en la configuración del editor

Sin embargo, el problema sigue ocurriendo si se importa la plantilla. También puede reproducirse en la página de demostración de GrapesJS (https://grapesjs.com/demo.html).

1. Importar la siguiente plantilla:
    ' <div id="ipwi" class="c1423">Test 
        <span arrastrable="true" id="iqhox">Problema de plantilla </span>
        </div>
        <style>* {
          Tamaño de caja: caja de borde;
          }
          cuerpo {
            marje: 0;
          }
          *{
            tamaño de caja: caja de borde;
          }
          body{
            marje:0;
            margen-top:0px;
            margen-derecha:0px;
            margen-bottom:0px;
            margen-izquierda:0px;
          }
          #ipwi{
            pantalla: bloque en línea;
            relleno: 5px;
            width:auto;
          }
          #iqhox{
            pantalla: bloque en línea;
            relleno: 5px;
            width:auto;
            color: RGB (255, 0, 0);
          }
        '</style>
2. Haz doble clic en el texto 'issue' para entrar en modo edición
3. Haz clic fuera del componente de texto
Observa: El formato aplicado en el texto 'Plantilla' se pierde

@artf
artf20 de marzo de 2020

Gracias por el informe @AbdiasM ya estamos al tanto del problema, debería solucionarse una vez que se resuelva el #1470 (así que puedes suscribirte al problema ahí).

Preguntas y respuestas relacionadas

Continúa investigando con debates sobre temas similares.

Plugins de pago que cumplen con este problema

Seleccionado por temas clave y relevancia de etiquetas para ayudarte a enviar más rápido.

Ver todos los plugins

Cargando recomendaciones de plugins de pago...

Opción gratuita

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 →
Opción premium

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.

Todos los tutoriales →

Explorar categorías de plugins

Ve directamente a las páginas de categorías de plugins en el marketplace.