[Question] Blockmanager and Image

Question

Hi! I use this code to add a new block:

    blockManager.add("image", {
        label: 'Image',
        category: 'Basic',
        attributes: { class: "gjs-fonts gjs-f-image" },
        content: {
            style: { color: "black" },
            type: "image",
            activeOnRender: 1,
        },
    });

How can add a custom class to the img tag when i drop into canvas?

Thanks.

arthuralmeidap · Accepted Answer

@alfaalex81 For the content object, you can add a new index called classes. This index needs to be an array of classes, which will be applied to the new Image block; Final code:

alfaalex81 · Answer

Awesome! I have another question for the same argument. I need to create a custom block with an image inside, for example:

Title

I add the code with block manager, but on drop into canvas asset manager doesn't open. Otherwise if I use image type attribute, it ignore my html content, I saved an example in js fiddle: https://jsfiddle.net/fp78yon0/ Thanks!

arthuralmeidap · Answer

This is not the current grapesjs's behavior. the AssetManager only opens if you dropping directly am img block.

You must have to select the img block within your custom block and execute a code like that:

editor.runCommand('open-assets', {
  target: editor.getSelected()
});

Blockmanager and Image

Question

Answers (3)

Related Questions and Answers

[QUESTION] Can i set content dynamically from block API ?

insert element or block inside parent element

Add custom style in the style-sheet for a new class of existing block.

[Question] Manipulate elements into a selected block in command

Paid Plugins That Match This Issue

Related tutorials

🚀 Introducing GrapesJS Email Blocky: The Ultimate Email Block Library for GrapesJS

Browse Plugin Categories