Imagen no cambia mientras buscamos HTML usando editor.getHtml()
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)
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....')')
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.
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.
Issue #1719
Evento mientras haces clic en la imagen desde el modal del recurso
Hola @artf, Espero que estés bien. Estoy trabajando en gestión de activos. Tengo un total de 5 imágenes como imagen predeterminada del gest...
Issue #1660
El contenido se eliminará automáticamente mientras edita en el editor
Hola @artf Estoy teniendo un problema con grapes.js al editar cualquier contenido textual. Estoy usando grapes.js versión 0.14.37 con angul...
Issue #1929
Carga el gestor de activos, pero los activos no funcionan
Estoy usando el icono del lápiz para activar el gestor de activos. El disparador funciona bien, pero cuando hago clic en cualquiera de las...
Issue #1817
Cambiar el contenido HTML mientras el bloque se renderiza en el editor
Hola @artf Tengo un bloque en el gestor de bloques como Según el script anterior dentro del bloque, quiero añadir contenido HTML dinámico m...
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.