ALLIGNING THE IMAGE AND TEXT TO BE ALLIGNED CENTERD BY DEFAULT

[SAKTHIVELMARIMUTHU]

Anybody can help me with in which file i can customise the allignment of the image and texts by default

[mosh-tudor]

@SAKTHIVELMARIMUTHU

in which file i can customise

You can start from the file where you initialized the editor.
https://grapesjs.com/docs/api/components.html#components

texts

For text you can do this:

  editor.DomComponents.addType('text', {
    model: {
      defaults: {
        style: {
          'text-align': 'center',
        },
      },
    },
  });

allignment of the image

This is more difficult because images are inline elements (+/-) and must be horizontally aligned within the parent element.

You can try:

  editor.DomComponents.addType('image', {
    model: {
      defaults: {
        style: {
          'display': 'block',
          'margin-right': 'auto',
          'margin-left': 'auto',
        },
      },
    },
  });

[SAKTHIVELMARIMUTHU]

I am sorry sir , I am in a project where they use grape js Actually they use this plugin
"import plugin from 'grapesjs-blocks-basic';" this plugin includes the image now i want to customize in this plugin sir how can I achive that ?

[mosh-tudor]

@SAKTHIVELMARIMUTHU Maybe something like this https://jsfiddle.net/dxfhnorp/

[SAKTHIVELMARIMUTHU]

YES @mosh-tudor I GOT IT NOW BUT I CANT ALLIGN WITH THE GRAPEJS STYLE MANAGER I WANT TO ADD IMAGE IN CENTER AS DEFAULT BUT AFTER THAT PEOPLE NEED TO ALIGN THIER IMAGE SO I NEED TO ALlGN THE IMAGE LIKE RIGHT LEFT AND CENTER

[mosh-tudor]

As I said before, images are inline elements (+/-) and must be horizontally aligned within the parent element. You have nothing to do here without workarounds.

There is also the option with float (float: left/right/none), but that can bring other problems...