psy_vk2

Sleeping

psy_vk2 / builder.html

Update builder.html

d44b4c8 verified 7 months ago

1.83 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>GrapesJS Example</title>
	<!-- GrapesJS CSS -->
	<link rel="stylesheet" href="https://unpkg.com/grapesjs/dist/css/grapes.min.css">
	</head>
	<body>
	<div id="gjs"></div>

	<!-- GrapesJS JS -->
	<script src="https://unpkg.com/grapesjs"></script>
	<!-- Your Custom JS -->
	<script>
	const editor = grapesjs.init({
	container: '#gjs',
	fromElement: true,
	height: '100vh',
	storageManager: { type: 0 },
	plugins: [],
	pluginsOpts: {},
	selectorManager: {
	componentFirst: true,
	},
	});

	// Define a custom script
	const script = function() {
	alert('Hi');
	console.log('the element', this);
	};

	// Define a new custom component
	editor.Components.addType('comp-with-js', {
	model: {
	defaults: {
	script,
	// Add some style, just to make the component visible
	style: {
	width: '100px',
	height: '100px',
	background: 'red',
	},
	components: `
	<button onclick="alert('Ещё')" style="margin: 10px;">Ещё</button>
	`,
	}
	}
	});

	// Create a block for the component, so we can drop it easily
	editor.Blocks.add('test-block', {
	label: 'Test block',
	attributes: { class: 'fa fa-text' },
	content: { type: 'comp-with-js' },
	});
	</script>
	</body>
	</html>