[Question] Add script using drag and drop that will add elements dynamically

Question

Hey. Thank you for this great project. I'm using it in one of my project and need some help.

1- I have a block element with script in it. This script add a form dynamically inside a iframe.

blockManager.add('custom-script', {
	label: 'email-custom-script',
	category: 'Forms',
	content: `
		<div>
			<script type="text/javascript" src="https://app.getresponse.com/view_webform_v2.js?u=zqQFS&webforms_id=SGRbz"></script>
		<div>`,
	attributes: {
	title: 'Get Response Form',
	class: 'fa fa-square'
	}
})

When I drag and drop the script in anywhere on the page. Grapesjs ignore the position and render the form at the end of the page.

But when I export the HTML and CSS from grapesjs the position is correct where it should be. Why this is happening.

2- When I enable "allowScripts: 1," in grapesjs init function. I can add scripts but can't drag and drop (use) my custom block elements

let blockManager = editor.BlockManager;
	let snippets = await this.getSectionSnippets();
	snippets.map((item) => {
	blockManager.add(item.name, {
		label: item.name,
		category: 'Sections',
		content: `<html><head><script></script><style>${item.css}</style></head><body>${item.html}</body></html>`,
		attributes: {
			title: item.name,
			class: 'fa fa-square'
		}
	})
});```


If a disable "allowScript" then I can use my custom block element but can't add scripts.

Answers (3)

umerrinayat• October 3, 20192 reactions

Finally it is solved @pouyamiralayi Thank you for helping me out. After using your solution. It insert the script at correct position.

pouyamiralayi• September 27, 20190 reactions

Hi! did you try putting your script in the script tag? this way it will be executed at the end and probably will respect the order you desire:

editor.BlockManager.add('form-block', {
    script: function(){/* your-js */}
}

cheers.

artf• September 28, 20190 reactions

When I drag and drop the script in anywhere on the page. Grapesjs ignore the position and render the form at the end of the page.

To be honest I don't know, it's all depended by the third-party library (in your case GetResponse) and how it appends content once loaded

When I enable "allowScripts: 1," in grapesjs init function. I can add scripts but can't drag and drop (use) my custom block elements

First of all, there is no need to use html, head, body tags in your blocks. You're dropping HTML snippets inside a body of already defined document... I highly suggest you read about Components as you'll get much more control than simple blocks

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.

Presets Plugins Components Blocks Assets Commands I18n Layers Styles Storages RTE Newsletters Web pages Site builders

[Question] Add script using drag and drop that will add elements dynamically

Question

Answers (3)

Related Questions and Answers

[Question] Is it possible to perform dom manipulation through the block's contents script?

BUG: Components in custom modal isn't editable

[QUESTION] Can i set content dynamically from block API ?

Form is not submitting

Paid Plugins That Match This Issue

Browse Plugin Categories