Techiio-author
Started by Natasha JonesMay 6, 2022

Open
Used grapes.js in react how to store the images using same api?

2 VIEWES 0 LIKES 0 DISLIKES SHARE
0 LIKES 0 DISLIKES 2 VIEWES SHARE

should I use different api for uploading assets? and what will be the process? I am facing some problem with the asset manager. I can store pure html, css into database from storage manager config . If anyone knows about it please share the knowledge!

1 Replies

Techiio-commentatorArchana Behera replied 3 months ago0 likes0 dislikes

yes you have to use different api for uploading assets.

import React, { useState, useEffect } from 'react';
import grapeJS from 'grapesjs';
import gjsPresetWebpage from 'grapesjs-preset-webpage';
import gjsCodeEditor from 'grapesjs-component-code-editor';
import { populateVariables } from '../utils/blockEditorUtils';

const BlockEditor = ({ template }) => {

const html = `<div>
<h1>Loaded template store in variable</h1>
<div>{{=it.name}}</div>
<div>{{=it.lastName}}</div>
</div>`;

const testData = {
name: 'John',
lastName: 'Doe',
};

const [stateEditor, setStateEditor] = useState(null);
const [htmlContent, setHtmlContent] = useState(html);

const editor = () => {
const grapeEditor = grapeJS.init({
container: '#editor',
components: html,
plugins: [gjsPresetWebpage, gjsCodeEditor],
pluginsOpts: {
gjsPresetWebpage: {},
gjsCodeEditor: {},
},
storageManager: {
type: null,
autosave: false,
autoload: false,
},
});
const panels = grapeEditor.Panels;
const panelViews = panels.addPanel({
id: 'views',
});
panelViews.get('buttons').add([
{
attributes: {
title: 'Open Code',
},
className: 'fa fa-file-code-o',
command: 'open-code',
togglable: true,
id: 'open-code',
},
]);
setStateEditor(grapeEditor);
};

useEffect(() => {
editor();
}, []);

useEffect(() => {
if(stateEditor) {

stateEditor.editor.on('run:preview', () => {
const htmlInfo = populateVariables(stateEditor.editor.getHtml(), testData);
stateEditor.editor.setComponents(htmlInfo);
});

stateEditor.editor.on('stop:preview', () => {
stateEditor.editor.setComponents(htmlContent);
});

stateEditor.editor.on('change:changesCount', (e) => {
const test = stateEditor.editor.getHtml()
setHtmlContent(test);
console.log(htmlContent);
});

}
}, [stateEditor]);

return <div id="editor" />;
};

export default BlockEditor;
You must be Logged in to reply
Techiio-logo

Techiio is on the journey to build an ocean of technical knowledge, scouring the emerging stars in process and proffering them to the corporate world.

Follow us on:

Subscribe to get latest updates

You can unsubscribe anytime from getting updates from us
Developed and maintained by Wikiance
Developed and maintained by Wikiance