Issue #2099✓ SolvedOpened June 25, 2019by Amir28282 reactions

Changing asset via command

快速解答by hitaloramon2

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.ta...

Read full answer below ↓

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)

👍 Most helpfulhitaloramonApril 26, 2021
代码片段TEXT
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, 2019

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, 2019

@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...

Free option

Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.

Browse free plugins →
Premium option

Premium plugins ship with support, regular updates, and production-ready features — save days of integration work.

Browse premium plugins →

Related tutorials

In-depth guides on the same topic.

All tutorials →

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.