Add new Components to editor

[piyalmaduranga]

i need to Add new components to editor like Image drag and drop , mynew components contain script like this

<script src = 'https://www.exsample.net/advert/api/zone/5/invocationcode'></script>

(this script show image)

how to add button to open box toolbar ?
how to add setting that component ?

i tried to this way

var domComponents = editor.DomComponents;
.......
domComponents: {
components: '<script src = "https://www.exsample.net/advert/api/zone/5/invocationcode"></script>',
}
.....

how can i add modal pop up after drop component to our template ?
(like image drop component)

[artf]

Hi @piyalmaduranga
those in the image are what I call Blocks, and a Block contains Components.

var blockManager = editor.BlockManager;

// Add new block
blockManager.add('my-block-id', {
  label: 'Simple block',
  content: '<div class="my-block">This string will be parsed and turned into a Component</div>',
});

// Edit
blockManager.get('my-block-id').set({
  label: 'Updated simple block',
  attributes: {title: 'My title'}
});

// Add a block as a Component
blockManager.add('my-map-block', {
  label: 'Simple map block',
  attributes: {
    class:'fa fa-map-o'
  },
  content: {
    // Built-in 'map' component
    type: 'map',
    style: { height: '350px'},
    // Once inserted it can't be removed (just an example)
    removable: false
  }
});

how can I add modal pop up after drop component to our template?

If you want to add custom behavior to your Components (eg. pop up a modal when inserted into the canvas, do something when is double clicked, etc.) you need to define a new Component type but I've not yet added those API to GrapesJS but are coming soon.

[piyalmaduranga]

Hi @artf

I tried load the script inside editor,

 blockManager.add('advert-id', {
        label: 'advert',
        content: '<div id="advertDiv"><script src ="https://www.sample.net/invocationcode"></div>',
    });

When I add component into template.It is not generate script tag.I want to get work script that I inserted.

block content is : <div id="advertDiv"><script src ="https://www.sample.net/invocationcode"></div>

It included script tag. but result not show script tag statement. Only show <div id ="advertDiv"></div>
missing my external script

Can I add external javascript block into template?

[artf]

@piyalmaduranga I'm still in progress to make templates work properly with javascript so for this reason I simply throw away all script tags, I can eventually add a new config property to let it import but not sure about the consequence

[piyalmaduranga]

HI @artf
i added block using block manager it was like <script>block content</script> then i save my edited template and i tried edit this template again , in this time run script that i added it show image with tag and <script> tag also
my problem was i want to remove html tag in div i defined of my template how can i do it?

[artf]

@piyalmaduranga can you show me maybe some screenshot about your problem, I don't get it. You were able to import correctly the <script> with Block but not with the already saved template?!?

[sebastianha]

If you want to add custom behavior to your Components (eg. pop up a modal when inserted into the canvas, do something when is double clicked, etc.) you need to define a new Component type but I've not yet added those API to GrapesJS but are coming soon.

Do you have any updates on this? I would need this feature, too.

[andrepeitz]

I would need the feature to define a new complex Component with custom behavior too and would really appreciate the implementation.

[artf]

@sebastianha @andrepeitz working on it. I'll ping you back when it's ready.
In the meantime, can you explain me your cases?

[sebastianha]

Hi,

for example I wanted to use the image component but as I store my images in a way that the file names get prefixed with md5 sum etc, the current component is not ideal for me as it shows the full path name in the list (this is very ugly for the user).

I wanted to show only parts of the file name or a different key of the returned object of the asset manager. I am also thinking about organizing my images in folders. Also I wanted to remove the ability to add images via URL, so only upload and the list should be available.

At the end I planned to add my own custom image component type for this (and also for learning how to write them).

BTW: Thanks for the great editor and keep continuing your work!

[andrepeitz]

I would like to use it for formulars where I can send the data via AJAX request to my backend.

[artf]

@sebastianha For the asset manager you don't need another component. You can pass custom names for image assets in this way:

var editor = grapesjs.init({
  ...
  assetManager: {
    assets: [
      {src: '.../cc4360/fff/image.jpg',} // Here you'll get image.jpg as asset label
      {src: '.../cc4360/fff/image2.jpg', name: 'Custom name'}
    ]
  }
  ...
});

Also I wanted to remove the ability to add images via URL, so only upload and the list should be available.

Just hide it with CSS :)

[sebastianha]

Thanks for the hint, didn't see that!

But for all other things a component type API would be nice :)

[artf]

@sebastianha @andrepeitz @piyalmaduranga
You can check now the new Component doc. Feedbacks are welcome :)
For any bugs open a new issue

[sebastianha]

Thank you very much, I will try it and let you know!

[andrepeitz]

Looks very good from my side! Thank you very much, I really appreciate that!

[GeraldAburto]

Which are the properties available for the content property of the block?

content: { ??? }

[artf]

@Gerald-AuZ
eg. HTML string
content: '<div>...</div>'
or GrapesJS's Component object

content: {
     tagName: 'section'
     attributes: {...}
     components: [{..}, {...}, ...]
}

[lock]

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.