Add new Components to editor about grapesjs HOT 18 CLOSED

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

from grapesjs.

Thanks for the hint, didn't see that!

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

from grapesjs.

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.

from grapesjs.

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?

from grapesjs.

@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

from grapesjs.

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?

from grapesjs.

@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?!?

from grapesjs.

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.

from grapesjs.

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

from grapesjs.

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

from grapesjs.

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!

from grapesjs.

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

from grapesjs.

@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 :)

from grapesjs.

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

from grapesjs.

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

from grapesjs.

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

content: { ??? }

from grapesjs.

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

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

from grapesjs.

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.

from grapesjs.