Issue #1649✓ ResueltoAbierto el 11 de diciembre de 2018por kickbkReacciones 2

La actualización 0.14.43 hace que el enfoque de CKEDITOR deje de reaccionar en MJML

Respuesta rápidapor kickbk2

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:

  1. Ir a https://grapesjs.com/demo-mjml.html
  2. Haz doble clic en medio de un elemento de texto
  3. El área de texto se resaltará y posiblemente se seleccionará una de las palabras.
  4. 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)

👍 Muy útilkickbk5 de febrero de 2019

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';
},
...
artf12 de diciembre de 2018

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

kickbk13 de diciembre de 2018

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.

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.