grapesjs

import grapesjs from 'grapesjs'; import 'grapesjs/dist/css/grapes.min.css'; // Ensure a DOM element exists for the editor document.body.innerHTML = '<div id="gjs"></div>'; const editor = grapesjs.init({ container: '#gjs', height: '700px', width: 'auto', fromElement: true, // Loads HTML from the container element storageManager: { type: 'local', // Use local storage autosave: true, // Autosave content autoload: true, // Autoload content on editor init stepsBeforeSave: 1, // Number of changes before autosave }, // Add some basic blocks blockManager: { blocks: [ { id: 'section', // id is a unique and required property label: '<b>Section</b>', // You can use HTML for the label category: 'Basic', content: '<section><h1>This is a section</h1></section>', }, { id: 'text', label: 'Text', category: 'Basic', content: '<div data-gjs-type="text">Insert your text here</div>', }, { id: 'image', label: 'Image', category: 'Basic', activate: true, select: true, content: { type: 'image' }, } ], }, // Configure the panels (optional) panels: { defaults: [ { id: 'commands', buttons: [{ id: 'undo', command: 'undo' }, { id: 'redo', command: 'redo' }] }, { id: 'options', buttons: [{ id: 'sw-visibility', command: 'sw-visibility', context: 'sw-visibility' }] }, { id: 'views', buttons: [{ id: 'open-blocks', command: 'open-blocks', active: true }] } ] }, }); // Log the HTML and CSS when the editor changes editor.on('update', () => { console.log('HTML:', editor.getHtml()); console.log('CSS:', editor.getCss()); }); console.log('GrapesJS Editor initialized successfully.');