El estilo se pierde al deseleccionar un componente al usar el método rte.exec
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:
- Eliminar un bloque de texto
- Haz doble clic en el bloque de texto y selecciona algo de texto (por ejemplo, aquí)
- Haz clic en el último icono de la barra de herramientas RTE y establece el color trasero Observa: Se aplica el color de fondo
- Haz clic fuera del bloque de texto
- Haz doble clic en el bloque de texto para entrar en modo edición
- Haz clic fuera del bloque de texto otra vez Observar: Se ha perdido el color de fondo
- 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)
¿Alguien?
Solucioné esto ajustando
avoidInlineStyle: 0,
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
@artfGracias 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.
Issue #779
Después de configurar el color de fondo, ningún elemento es arrastrable
Hola @artf, Hemos comprobado que cuando establecemos el color de fondo de cualquier elemento, ningún otro elemento es arrastrable. Este es...
Issue #2331
Reglas CSS sobrescritas por cssComposer.setRule(...)
Mi sitio tiene una barra lateral personalizada para establecer colores a nivel de sitio, familias de fuentes, tamaños de fuente, etc. Cuand...
Issue #408
¿Cómo actualizar la barra de herramientas de un componente?
! imagen Hola Artf, me han añadido un nuevo comando a componente editable, el estilo de actualización funciona bien pero no sé cómo actuali...
Issue #2083
[PREGUNTA] model.get('toolbar') siempre devuelve null
Hola @artf Estoy intentando añadir una barra de herramientas personalizada a mi componente personalizado sin cambiar la barra predeterminad...
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
GrapesJS Inline RTE Plugins Update: CKEditor 5 v0.1.4 and Froala Inline Text Editor
CKEditor 5 Inline for GrapesJS v0.1.4 fixes Studio SDK toolbar clipping, iframe injection and link balloon bugs. Compare with Froala Inline — both $69.
Explorar categorías de plugins
Ve directamente a las páginas de categorías de plugins en el marketplace.