JSFiddle - React, Tailwind, and code Playground

by artur_arseniev

HTML

<!DOCTYPE html>
<html>
	<link href="https://grapesjs.com/stylesheets/grapes.min.css?v0.21.7" rel="stylesheet" type="text/css">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/grapesjs/0.21.7/grapes.min.js"></script>
	<body>
		<div id="gjs" style="height: 0px; overflow: hidden;">
		</div>
	</body>
</html>

JavaScript

const firstscript = function() {
		alert('Number One!');
		console.log('The first script fired');
	}
	const addCustomType = editor => {
		editor.Components.addType('myfirstcustomtype', {
			model: {
				defaults: {
					script: firstscript
				}
			},
			view: {
			}
		});
	};
	const editor = grapesjs.init({
		parser: {
			optionsHtml: {
				allowScripts: true
			}
		},
		container: "#gjs",
		fromElement: true,
    storageManager: false,
		plugins: [
			addCustomType
		]
	});
	editor.Blocks.add('myfirstcustomblock', {
		label: 'FCBC',
		content: {
			type: 'myfirstcustomtype'
		}
	});
	editor.Blocks.add('aheading', {
		label: 'Heading',
		content: '<h1>A Heading</h1>'
	});