[HELP] Dragging external content to Canvas
Question
I am trying to add d&d functionality from a modal which lists a bunch of html files (html snippets) .. into the editor canvas.
Each of them enclose the content with a <section>
I tried to use 'canvas:dragdata' to allow dropping into canvas
editor.on('canvas:dragdata', (dataTransfer, result) => {
if(el.tagName == 'SECTION' && el.classList.contains('section')){
result.content = { type: 'text/html'}
}
});
As i understood, this is to extend the file types can be dropped, GrapesJS supports text + image, so above approach should work?
Meanwhile, and after playing around with
editor.DomComponents.addType
i am changing the scope of my issue ..see comment below
Answers (2)
I am clarifying what i want to achieve: I have some 100+ html snippets which i use on current 'handcrafted' builder and need to migrate them to GrapesJS. To my surprise,, this doesn't seem to be a straight forward job. Currently, with 2 Ajax functions i achieve what is needed. a) ajax + scan_dir to list all files inside a directory (image & html file) b) user clicks (or drags) the (preview) image into editable div and Ajax retrieves the corresponding html file, placing it where desired. Done!
How can GrapesJS solve this?
At least, i was expecting that text/html with standard html5 tags is supported to drag into editor canvas, from outside the editor.
EDIT: Raw html can be dragged into the editor from outside, this might be a workaround as i see, without having to deal with components & blocks for each need
Here you can find how to do that https://github.com/artf/grapesjs/issues/2595
Related Questions and Answers
Continue research with similar issue discussions.
Issue #2008
[Question]The canvas turns dark and unmodifiable on adding a large piece of custom html.
I used to add custom html with editor.addComponent(). It works well at most of the time, but when I try to insert a large piece of HTML whi...
Issue #460
When the component's view modifies the HTML, text components are no longer editable
I'm trying to build a custom component that contains some lorem ipsum text in the content, for editing once it's on the canvas. But I also...
Issue #1263
How can i embed a modal and be able to edit it in my html content
Good Day I am trying to add a modal into my html, I was able to add a modal in the blockmanager but i am struggling to find ways to edit th...
Issue #2189
[Question] How to add "Ordered/Unordered List" option in rte/custom block
Hi I'm trying to create an ordered list with grapesjs. I tried adding the following to the rte: And this works if my page is pre-filled wit...
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.