[QUESTIONS] Creating image map on canvas
Question
Hi, Is there anyway to create image map like functionality on canvas. User should be able to select particular area for linking. Example the way it's done in this below link. https://www.jqueryscript.net/demo/Easy-Imagemap-Generator-With-jQuery-hotArea-js/
I have tried creating link like below but this doesn't give flexibility to move around all the places.
var bm = editor.BlockManager;
bm.add('link-block3', {
category: 'Basic',
label: 'Link Block3',
attributes: { class: 'fa fa-link' },
content: {
type: 'link',
droppable: true,
draggable: true,
resizable: true,
attributes: { class: 'fa fa-link' },
style: {
display: 'inline-block',
padding: '5px',
'min-height': '50px',
'min-width': '50px'
}
},
});
canvas:dragover will trigger only when blocks are dragged inside the canvas. Is there any solutions or events which I can trigger to select the canvas?Answers (2)
With a custom component you should be able to create whatever you want
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.
Related Questions and Answers
Continue research with similar issue discussions.
Issue #1707
Find images links in the editor
I am trying to integrate GrapesJs in reactJs. Can you please help me out with the below question w.r.t GrapesJs-React, • Is there a way to...
Issue #482
Default asset manager in custom component
I am in process to create custom component for below template and we want to have user enter text,link,hover text and select image and want...
Issue #362
How to create custom link components that prompts users to type link/choose link similar to Images Component Modal
Image Components have logic to call Modal and prompt user's interaction for options/configuration of image url. Would like to do similar to...
Issue #880
Custom block with outside plugin in Grapesjs
I want to integrate Image viewer jquery plugin in grapesjs new custom block. I have loaded jQuery first. ImageViewer Plugin url - https://w...
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.