Borrado de imágenes no editables mediante Javascript
Hace poco he tenido un problema con el editor que estoy desarrollando y al que he aplicado una solución que, aunque no sé si es la más ortodoxa, funciona y me gustaría explicar por si a alguno le ha pasado algo similar.
El problema consiste en la necesidad de borrar imágenes dentro de un editor web y con la peculiaridad de que estas imágenes no son editables. Pero, ¿por qué no son editable?
El editor WEB que estoy desarrollando y que está programado íntegramente en Javascript, permite añadir imágenes. Para que el editor funcione, me baso en la característica propia de los editores web que incluyen todos los navegadores. La cuestión es que si a un objeto, como por ejemplo una capa (DIV) le añadimos la propiedad “contentEditable” y la igualamos a cierto, esa capa se convierte en editable, y todos los objetos que la contengan también serán editables.
Para las imágenes, esto en vez de ser un problema es una ventaja, ya que el propio editor permite su gestión, incluido su redimensionamiento. Pero lamentablemente no todos los navegadores tienen la misma funcionalidad y, por ejemplo, el Google Chrome no dispone de esta gestión de imágenes.
¿Qué hacen otros editores?
Sencillamente no permitir la redimensión de forma interactiva en estos navegadores.
¿Qué hago yo?
Lo que hago es controlar esa redimensión mediante una funcionalidad Javascript, pero para que no se ejecute la propia redimensión del navegador he de desactivar la edición de imágenes.
El problema
La cuestión es que, si ahora seleccionamos la imagen y pulsamos el botón suprimir, la imagen no se borra. 🙁
¿Por qué?
Obviamente la imagen no se borra porque no es editable.
Mi primera tentativa
La primera opción que barajé, fue añadir un control de teclado y al pulsar la tecla de suprimir eliminar la imagen mediante un simple borrado de objeto. El problema es que si hacemos esto no funcionará el deshacer, cosa que es un gran problema.
Cuál ha sido mi solución
Pues la solución, como cualquier solución una vez se conoce, es bien sencilla. Lo que hago es controlar la bajada de tecla y si es un suprimir, hago una selección previa de la imagen … y listo, la imagen se borra, y al deshacer vuelve a aparecer.
En el siguiente vídeo os explico el problema y la solución
Os recuerdo que, si tenéis dudas en programación y está de mi mano, podéis dejar un comentario e intentaré resolvérosla.
Gracias y no olvidéis suscribiros a mis canales.
