La actualización 0.14.43 hace que el enfoque de CKEDITOR deje de reaccionar en MJML
Resuelto: El problema ocurre con las funciones 'enableEditing' y 'disableEditing' en los componentes de mjml. Para solucionarlo, sustituye esas funciones por las nuevas, sin embargo, también actualizo los 'pointerEvents' a 'ninguno' en 'desactivar' y 'todos' en 'activar'. Esto se puede aplicar a cualquier componente q...
Lee la respuesta completa abajo ↓Pregunta
@art, sé que dejaste de apoyar tu proyecto MJML, pero si no te importa, he notado un problema que causa la última actualización.
Para reproducir:
- Ir a https://grapesjs.com/demo-mjml.html
- Haz doble clic en medio de un elemento de texto
- El área de texto se resaltará y posiblemente se seleccionará una de las palabras.
- Haz clic de nuevo en cualquier punto del centro del texto. Por ejemplo, prueba a seleccionar una palabra.
Verás que ya no es posible seleccionar dónde en el texto colocar el cursor de texto parpadeante o seleccionar partes del texto.
Este problema no está presente en la versión 0.14.40 y inferiores
Respuestas (3)
Resuelto: El problema ocurre con las funciones 'enableEditing' y 'disableEditing' en los componentes de mjml. Para solucionarlo, sustituye esas funciones por las nuevas, sin embargo, también actualizo los 'pointerEvents' a 'ninguno' en 'desactivar' y 'todos' en 'activar'.
Esto se puede aplicar a cualquier componente que necesites activar o desactivar la edición.
Coloca dentro de GJS-MJML/componentes/Text.js
...
eventos: { // Necesitamos esto para escuchar el evento de doble clic
dblclick: 'onActive',
},
onActive(e) {
Colocamos esto antes de stopPropagation en caso de anidado
Los componentes de texto no bloquearán la edición (#1394)
if (this.rteEnabled || !this.model.get('editable')) {
regresar;
}
e & & e.paradePropagación && e.paradePropagación();
const rte = this.rte;
If (RTE) {
try {
this.activeRte = rte.enable(this, this.activeRte);
} captura (err) {
consola.error(err);
}
}
this.rteEnabled = 1;
this.toggleEvents(1);
this.getChildrenContainer().style.pointerEvents = 'todos';
},
disableEditing() {
modelo const = este.modelo;
const editable = model.get('editable');
const rte = this.rte;
const contentOpt = { fromDisable: 1 };
si (rte & editable) {
try {
rte.disable(this, this.activeRte);
} captura (err) {
consola.error(err);
}
const content = this.getChildrenContainer().innerHTML;
const comps = model.get('components');
comps.length & & comps.reset();
model.set('content', '', contentOpt);
Si hay un RTE personalizado, el contenido simplemente se hornea de forma estática
Dentro del 'contenido'
if (rte.customRte) {
Evita el doble contenido eliminando sus componentes hijos
y fuerza para desencadenar el cambio
model.set('content', content, contentOpt);
} else { // No está en uso porque usamos un rte personalizado
const clean = model => {
const seleccionable = ! ['texto', 'default', ''].some(type =>
model.is(escribe)
);
model.set({
editable: selectable & model.get('editable'),
resaltable: 0,
removible: 0,
arrastrable: 0,
copiable: 0,
seleccionable: seleccionable,
hoverable: seleccionable,
Barra de herramientas: ''
});
model.get('components').each(model => clean(model));
};
Evitar volver a renderizar al reiniciar con la opción de silencio
model.trigger('change:content', model, '', contentOpt);
comps.add(contenido);
comps.each(model => clean(model));
comps.trigger('resetNavigator');
}
}
this.rteEnabled = 0;
this.toggleEvents();
this.getChildrenContainer().style.pointerEvents = 'ninguno';
},
...
La misma versión de grapesjs con el mismo plugin CKEditor funciona bien aquí, así que parece no estar relacionada con la última versión
Déjame demostrarlo. Voy a hacer doble clic en un campo de texto y luego moverme para intentar hacer clic dentro.
Esto es v0.14.40 - Obras ! v0 14 40
Esto es v0.14.43 - Tiene el problema. ! v0 14 43
Y el mismo problema con https://grapesjs.com/demo-mjml.html. v0.14.43 - tiene el problema ! grapesjs-mjml
Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
Issue #1394
[Error]: Pegar varios párrafos no se puede editar hasta que Grapes se recarga
https://grapesjs.com/demo.htmlEn el doble clic en el texto "Todos los bloques de texto podrían..." para activar el modo edición.Pega este t...
Issue #1812
[Bug]: 404 al intentar añadir imagen de fondo (reproducible en la demo)
Visita https://grapesjs.com/demo.html en Chrome IncognitoHaz clic en el elemento "Cabecera"Haz clic en Decoraciones > FondoEliminar la capa...
Issue #1768
Demo de MJML rota
Si voy a https://grapesjs.com/demo-mjml.html y trato de arrastrar una imagen al editor, me aparece un error de que es un objetivo inválido.
Issue #403
Incorpora Juice Inliner (o similar) a CSS en línea para la creación de correos HTML
La demo muestra un boletín, pero no creo que el CSS se inlinee, que es realmente necesario para un mejor soporte por correo electrónico. ht...
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.
Explorar categorías de plugins
Ve directamente a las páginas de categorías de plugins en el marketplace.