[Question]: new style is not reflected in panel
Question
Hello,
In my project I have replaced the AssetManager by my own. However, when I use the new manager to update a components background-image, the background-image shows up, but the new state isn't reflected in the panel.
editor.Commands.add('open-assets', {
run(editor, sender, opts) {
let fm = new FileManager;
fm.onselect = function(src) {
const url = '{{ Config::get('app.baseurl') }}' + src;
if (opts.target.attributes.type == 'image') {
opts.target.set('src', url);
}
if (opts.target.attributes.type == 'file') {
editor.getSelected().addStyle({'background-image': `url('${url}')`});
}
};
fm.show();
}
});
Basically my question is: how do I detect what property or attribute the user is editting? And how to reflect the new state in the panel?
Best, Richard
Answers (3)
First of all, I'd avoid applying the style on selected component editor.getSelected(), you should do it on opts.target as it might be different from the selected one editor.runCommand('open-assets', { target: someOtherComponet })
how do I detect what property or attribute the user is editting?
Make use of https://github.com/artf/grapesjs/wiki/API-Editor#available-events
And how to reflect the new state in the panel?
Try to use this editor.trigger('component:toggled') after addStyle
This issue has been automatically closed because there has been no response to our request for more information from the original author. With only the information that is currently in the issue, we don't have enough information to take action. Please reach out if you have or find the answers we need so that we can investigate further.
@artf Thanks, I followed your suggestions, but I can not get it to work.
opts.target does not have a addStyle method
It also seems the editor is generating an extra id in the css, so there are duplicates. I have set avoidInlineStyle: true, but that does not seem to help
Related Questions and Answers
Continue research with similar issue discussions.
Issue #1457
[Question]: Custom asset manager background-image in Style Manager
Hello, i want to use custom Asset Manager i am used this solution, ` var assettarget =''; editor.Commands.add('open-assets', { run(editor,...
Issue #930
[Question] Update resizer after asset changed
Hi! I trying to change default assets manager with ours custom manager. On double click the selected image is replaced with a new one with...
Issue #795
editor.getSelected() in run:open-assets
Hello! I want without having to create a new block button, and stopping the event associated to the image that this run:open-assets get the...
Issue #1879
[Question] Traits manager - image type field.
Hello, I want to add a new field in traits manager (components settings). This field should select an image from the assets manager and ret...
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.