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)
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");
}
});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
@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.
Issue #2097
New views question
Hello all, Is there is any simple way to add a new view right next to the style manager? I would like to create a new view that will show s...
Issue #2316
Customizing the assets-manager view
I would like to create a custom assets-manager modal to open in bootstrap modal. I'd like to keep the original assets manager functionality...
Issue #3019
[QUESTION] - Bind inner text/html (like div, p, h1) to Trait
Hi! I've created a custom trait, and I want to be allowed to change the content of the tags (in this case it's a H1 tag) based on the trait...
Issue #2849
[BUG] Using image url for background-image is not working properly
DescriptionOn our project for images assets we use url instead of base64 code .Expected behavior When setting a background-image to a contr...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.