Issue #2099✓ ResueltoAbierto el 25 de junio de 2019por Amir2828Reacciones 2

Cambio de activo mediante comando

Respuesta rápidapor hitaloramon2

Hola @mmotov, Te enseñaré cómo lo hice, es más fácil de entender. Al capturar el valor de la imagen, lo defino de la misma manera, pero a continuación hago algunas comprobaciones para saber si el elemento es un fondo o no. editor. Commands.add("open-assets", { run(editor, sender, opts = {}) { var image = $("#img-file"...

Lee la respuesta completa abajo ↓

Pregunta

Hola a todos,

Me gustaría emular el comportamiento de reemplazo de imagen del gestor de assets. por ejemplo, creé una vista lateral con todas las imágenes que están presentes en el lienzo. Me gustaría que los cambios en la vista se reflejaran en el lienzo, igual que el gestor de recursos reemplaza las imágenes en el momento.

Cualquier ayuda será bienvenida.

Respuestas (3)

👍 Muy útilhitaloramon26 de abril de 2021
Fragmento de códigoTEXT
Hola @mmotov,

Te enseñaré cómo lo hice, es más fácil de entender.

Al capturar el valor de la imagen, lo defino de la misma manera, pero a continuación hago algunas comprobaciones para saber si el elemento es un fondo o no. 

editor. Commands.add("open-assets", {
    run(editor, sender, opts = {}) {
        var image = $("#img-file").val();
    
opts.target.set("src", imagen);

if (opts.target.attributes.type == "image") {
            if (imagen) {
                opts.target.set("src", imagen);
            }
        } else {
            if (opts.target.getStyle()["imagen-fondo"] == indefinido) {
                var background = 'url("${image}")';
            } else {
                var background = opts.target.getStyle()["imagen-fondo"] + 'url("${image}")';
            }

opts.target.addStyle({
                "imagen de fondo": fondo
            });

editor.trigger("component:toggled");
        }

editor. Commands.stop ("open-assets");
    }
});
hananint25 de junio de 2019

Hola @Amir2828, me gustaría ponerme en contacto contigo sobre tu trabajo en GrapeJs si te interesa un proyecto paralelo. Avísame

artf4 de julio de 2019

@Amir2828 al seleccionar tienes que cambiar la propiedad 'src' del componente Imagen 'editor.getSelected().set({ src: 'https://.../image3.jpg' })'

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 →

Explorar categorías de plugins

Ve directamente a las páginas de categorías de plugins en el marketplace.