Issue #2099Opened June 25, 2019by Amir28282 reactions

Changing asset via command

Question

Hello All,

I would like to emulate the assets manager image replace behavior. for example I created a view on the side with all the images that are present on the canvas. I would like that changes on the view will be reflected on the canvas, just like the way the assets manager is replacing images on the spot.

Any help will be appreciated.

Answers (3)

hitaloramonApril 26, 20212 reactions
Code SnippetTEXT
Hi @mmotov,

I'll show you how I did it, it's easier to understand.

When capturing the value of the image I define it in the same way, but below I do some checks to know if the element is a background or not. 

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

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

            opts.target.addStyle({
                "background-image": background
            });

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

        editor.Commands.stop("open-assets");
    }
});
hananintJune 25, 20190 reactions

Hi @Amir2828, I would like to connect with you on your work on GrapeJs if you are interested in a side project. Let me know

artfJuly 4, 20190 reactions

@Amir2828 on select you have to change the src property of the Image component editor.getSelected().set({ src: 'https://.../image3.jpg' })

Related Questions and Answers

Continue research with similar issue discussions.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.