Issue #1762💬 RespondidoAbierto el 29 de enero de 2019por AkibDeraiya123Reacciones 0

Imagen no cambia mientras buscamos HTML usando editor.getHtml()

Respuesta rápidapor artf

No has mostrado ningún código, pero supongo que acabas de editar elementos DOM del componente cuando en realidad deberías cambiar sus datos de modelo Component (por ejemplo, 'imgModel.set('src', 'base64....')')

Lee la respuesta completa abajo ↓

Pregunta

Hola @artf

Estoy usando grapes.js como herramienta de creación de sitios web en mi sitio web. Mientras hago doble clic en cualquier imagen, el gestor de activos se abre y puedo elegir la imagen desde el gestor de activos.

Ahora bien, pongo las condiciones como: una vez que el usuario elija cualquier imagen del gestor de recursos, voy a sustituir esa etiqueta 'img' por la etiqueta 'div' e inicializar un 'editor de imágenes (es cropper.js)' ahí.

Ahora, una vez que cierro el asset manager tras seleccionar la imagen, se establece la nueva ruta de imagen y también se establece la nueva div en lugar de la etiqueta img.

Una vez que el usuario hace clic en el botón de terminar dentro del editor (me refiero al editor de imágenes), entonces nos da la imagen base-64, también repongo la imagen actualizada base-64 en la interfaz, pero una vez que obtengo el contenido html real usando 'editor.getHtml()', solo obtengo la etiqueta img de ruta actualizada en lugar de reemplazar div y la ruta de imagen base:64.

¿Puedo saber cómo puedo actualizar la nueva ruta de imagen (base-64) mientras obtengo contenido html usando editor.getHtml()?

Aquí adjunto el vídeo de screencast para lo mismo, https://drive.google.com/file/d/1zeUcO8aVXDCeWCVakHpbycgHGtfnU4Qa/view

Respuestas (3)

artf6 de febrero de 2019

No has mostrado ningún código, pero supongo que acabas de editar elementos DOM del componente cuando en realidad deberías cambiar sus datos de modelo Component (por ejemplo, 'imgModel.set('src', 'base64....')')

AkibDeraiya12315 de febrero de 2019

Hola @artf Gracias por tu respuesta a mi consulta.

Adjunto mi código aquí, por favor dime en qué me estoy equivocando.

Esto se ejecutará una vez que el gestor de activos esté abierto
      editor.on("run:open-assets", function () {
        var dateNow = Date.now();
        editor.getSelected().setId(AhoraFecha);

Almacenar el ID de imagen del gestor activo de activos y su src
        localStorage.setItem('activeAssetManagerImageId', dateNow);
      })

Así que, básicamente, el código anterior se ejecutará mientras el usuario hará doble clic en una imagen concreta. En esta función voy a añadir un atributo 'id' generado aleatoriamente en la imagen seleccionada.

Ahora también llamo a los 'stop:open-assets',

editor.on("stop:open-assets", función () {
   Aquí estoy tomando 'src' del 'Dom' con 'activeAssetManagerImageId', que se guarda en 'local-storage', y comprobando si tanto el 'src' anterior como el actual 'src' no coinciden; entonces voy a inicializar el recorte, si no. Ahora, una vez que el usuario termina de editar la imagen, tengo un botón y un botón encendido que llamo a la función única. En esta función ahora mismo estoy cambiando la imagen 'src' usando jQuery, que funciona bien. Pero cuando recibo 'editor.getHtml()' no se reflacha.
})

He probado con algo así: Este código funciona bien mientras voy a usar la función '.set' con 'opts'. Pero aquí hay problema que cuando añado estas 3 líneas, el gestor de assets no va a abrir.

editor. Commands.add('open-assets', function(editor, sender, opts) {
        opts.target.set('src', 'https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg');
      });

Si hay algún método editor.command mientras el usuario elige la imagen y cierra el assetManager, se ejecutará con tres parámetros como 'editor, sender, opts', así que usando este 'opts' puedo establecer la nueva ruta de imagen que se reflejará tanto en la interfaz como en el modelo, así que, cuando tenga todo el HTML entonces este src debería actualizarse.

O si no, ¿cómo puedo conseguir que estos tres parámetros 'editor, sendero, opts' estén en la función '''editor.on("stop:open-assets"'''?

Hice lo que fuera, intenté explicártelo aquí. Si aún no entiendes mi punto, dime que lo explicaré de nuevo, pero por favor dame algún ejemplo o algo para que pueda tener más ideas sobre cómo puedo lograr mi objetivo con fantásticos grapes.js liberales y también con personas que han inventado esto.

Gracias de antemano por vuestra ayuda.

artf16 de febrero de 2019

En esta función ahora mismo estoy cambiando la imagen 'src' usando jQuery, que funciona bien. Pero cuando recibo 'editor.getHtml()' no se reflacha.

... @AkibDeraiya123 esto es exactamente lo que te dije en mi comentario anterior... NO EDITES el DOM con JQuery... Edita el modelo como te dije

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.