Custom components based on Link block with a default href
Question
Hi! I have a GrapesJS integration on a laravel project with custom components directly on the page (each block is supposed to be block link to a content). So far I replicated the block link component like that
@foreach($contents as $content)
editor.BlockManager.add('content_{{ $content->id }}', {
category: 'Contents',
label: '<b>{{ $content->title }}</b>',
attributes: { class:'fa fa-graduation-cap' },
content: {
type: 'link',
editable: false,
droppable: true,
style:{
display: 'inline-block',
padding: '5px',
'min-height': '50px',
'min-width': '50px'
},
content: '{{ $content->title }}',
},
});
@endforeach
So far so good. But I need that each of these components has his own href defined by default. No matter if it's editable or not. Something like this:
href: 'http://url.com/content/{{ $content->id }}',
Can't find the solution. Any idea?
Thanks
Answers (1)
@csb346 you can define a new custom component type:
editor.DomComponents.addType('content-link', {
extend: 'link',
model: {
defaults: {
editable: false,
droppable: true,
style: {
display: 'inline-block',
padding: '5px',
'min-height': '50px',
'min-width': '50px'
},
attributes:{href:'http://google.com'}
content: '{{ $content->title }}',
}
}
});
and then use it inside a block:
editor.BlockManager.add('content-link', {
label:'Content Link',
category:'Contents',
attributes: { class:'fa fa-graduation-cap' },
content:{
type:'content-link'
}
})
just remember you must define your custom component type inside a plugin Cheers!
Related Questions and Answers
Continue research with similar issue discussions.
Issue #2961
BUG: Components in custom modal isn't editable
Hello, I'm trying to add custom modal block to my project and I want to change content of this modal also with drag&drop. Here's code of my...
Issue #3207
Form is not submitting
I am trying to create as custom block. But the form is not submitting when i use components inside content. I am able to get all the form d...
Issue #1290
[BUG]Set href for link block not editable once initialized
#1277 is closed but issue still exist so i have to post as new issue Thank you for the help for earlier @maryia-kabash @artf I have made a...
Issue #3223
FEAT: Create the canvas from a URL
I've been playing with GrapesJS and trying to integrate it into a Symfony 5 project. In particular I want to be able to edit templates in t...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.