Grapesjs: editor.getSelected() in run:open-assets

Created on 25 Jan 2018  路  6Comments  路  Source: artf/grapesjs

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 area created by the editor in the canvas and add there the image that I got with my personalized modal image.
I want to clarify that when I double-click on the image inside the canvas and select the image from my image manager it is updated correctly with editor.getSelected(), but when I add it from the block panel, it doesn't get the select object and gives me an error: don't find the getSelected function.

editor.on('run:open-assets', function(){ editor.Modal.close(); window.send_to_editor = function(src) { editor.getSelected().set('src',src) editor.getSelected().set('srcset',src) tb_remove(); } });

Is there any other way to solve this?

outdated

Most helpful comment

Pay attention to the current command
Your command should be something like this

editor.Commands.add('open-assets', {
     run(editor, sender, opts = {}) {
        // Here you call your custom asset manager, for example
          someCustomeManager.open({
                 onImageSelect(url) {
                    // update the selected component
                    opts.target.set('src', url);
                    ...
                 } 
          })
     }
});

All 6 comments

Apologize @chiqui3d but try to elaborate better, because I didn't get a single statement of what you're asking

Yes @artf , you're right, I just updated it, I hope it's understood now.

If you're working with a custom asset manager take a look here #491

thanks @artf , but now I have another error:

Uncaught TypeError: Cannot read property 'set' of null

And this is the complete code:

editor.Commands.add('open-assets', {
     run(editor) {
    editor.getSelected().set('src',"http://via.placeholder.com/350x150");
   }
});

and also not with:

this.$el.attr('src',"http://via.placeholder.com/350x150");

It only happens when I drag the image block, editing the image does it well.

Pay attention to the current command
Your command should be something like this

editor.Commands.add('open-assets', {
     run(editor, sender, opts = {}) {
        // Here you call your custom asset manager, for example
          someCustomeManager.open({
                 onImageSelect(url) {
                    // update the selected component
                    opts.target.set('src', url);
                    ...
                 } 
          })
     }
});

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

FlashPapa picture FlashPapa  路  3Comments

tribulant picture tribulant  路  3Comments

faizansaiyed picture faizansaiyed  路  3Comments

nojacko picture nojacko  路  3Comments

ryandeba picture ryandeba  路  3Comments