¿Cómo puedo guardar el contenido de tinyMCE antes de su destrucción? (cerrar pestaña, navegar, etc.)

01 Jun, 2023 Programación 0

Tenemos una página web que tiene un editor tinyMCE vinculado a una base de datos. En esta página web, tenemos algunos botones como “Ayuda”, “Configuración”, “Cerrar sesión” que pueden ‘eliminar’ (usemos esta terminología) el contenido de nuestro editor tinyMCE, porque estos botones abren otro(s) diseño(s) en los que, por supuesto, el editor está ausente.

Queremos activar nuestro subsistema “Guardar en la base de datos” cuando el usuario:

Haga clic en cualquiera de los botones que destruyen el editor (ver arriba)
Destruya el editor tinyMCE cerrando la pestaña / navegador.
Destruya el editor tinyMCE navegando a otra parte (por ejemplo, de nuestroSitio.com a google.com)

Ahora hemos probado todo lo anterior y (por supuesto) el contenido no se guarda.

¿Cómo podemos lograr este guardado automático al destruir?

La solución debe funcionar en Chrome / Edge, Firefox y Safari.

Notas:
– Hemos probado esta demo: https://fiddle.tiny.cloud/hRhaab/2 (conectando el evento “eliminar”), pero no parece funcionar.
– Una alternativa emergente con “Los datos no se guardan. ¿Quieres continuar?” también es aceptable.
– Los datos son bastante pequeños. No hay imágenes, solo un poco de texto (unas pocas páginas A4 como máximo).
– En el caso de los botones, tratamos de evitar la solución obvia escribiendo una DoSaveMyEditor() debajo de cada botón.

¿Alguna ayuda?

// Obtener la instancia del editor var editor = tinymce.get('myEditorId'); // Escuchar el evento de beforeunload window.addEventListener('beforeunload', function(e) { // Comprobar si el editor existe y el contenido ha sido modificado if (editor && editor.isDirty()) { // Activar guardar en subsistema de base de datos saveToDb(editor.getContent()); // Opcionalmente mostrar un mensaje de confirmación e.preventDefault(); e.returnValue = ''; } }); // Función para guardar contenido en Db function saveToDb(content) { // ... }

Answer

davy.ai

June 1, 2023 at 11:01 am
Para lograr el guardado automático al destruir el editor TinyMCE en los escenarios mencionados, una posible solución podría ser escuchar el evento “beforeunload” en el objeto de ventana. Este evento se dispara cuando la ventana está a punto de descargarse, ya sea navegando lejos de la página, cerrando la pestaña/navegador o haciendo clic en un botón que destruye el editor.

En la función del listener del evento, podemos comprobar si existe la instancia del editor y si el contenido ha sido modificado, y si es así, activar el subsistema “Guardar en Db” para guardar el contenido.

Aquí tienes un ejemplo de fragmento de código:
```
// Obtener la instancia del editor
var editor = tinymce.get('myEditorId');

// Escuchar el evento de beforeunload
window.addEventListener('beforeunload', function(e) {
  // Comprobar si el editor existe y el contenido ha sido modificado
  if (editor && editor.isDirty()) {
    // Activar guardar en subsistema de base de datos
    saveToDb(editor.getContent());

    // Opcionalmente mostrar un mensaje de confirmación
    e.preventDefault();
    e.returnValue = '';
  }
});

// Función para guardar contenido en Db
function saveToDb(content) {
  // ...
}
```
Esta solución debería funcionar en Chrome/Edge, Firefox y Safari. Además, el evento “unload” también se podría utilizar como alternativa para navegadores más antiguos que no admitan “beforeunload”.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

¿Cómo puedo guardar el contenido de tinyMCE antes de su destrucción? (cerrar pestaña, navegar, etc.)

Answer

davy.ai