GrapeJS Web Builder
Configuration du storage manager
Créer un nouveau projet
Fonctionnalités
- Introduction
- Graph REST API
- Les listes
Plugins SPFx
- Créer son plugin SharePoint
- spfx-list-migration
- GrapeJS Web Builder
GrapeJS Web Builder
Configuration du storage manager
Afin de dynamiser le site, il faut configurer le storage manager pour sauvegarder les données du projet dans un fichier json ou dans une liste SP. Dans cet exemple, nous utiliserons un fichier json.
Dans src/webparts/monSuperSite/grapejs/index.tsx :
const [pages, setPages] = useState<any[]>([]);
useEffect(() => {
editorRef.current = grapesjs.init({
// ...
storageManager: {
type: "remote-local",
autosave: true,
autoload: true,
stepsBeforeSave: 1,
},
// ...
});
editorRef.current.Storage.add('remote-local', {
async load() {
try {
const content = await sp.web.getFolderByServerRelativePath(folderName).files.getByUrl(fileName).getJSON()
setPages(content.pages)
// Update Pages state
return content;
} catch (err) {
console.error("Error on load : ", err);
// Fallback sur le localStorage
const localStorage = editorRef.current.Storage.get('local');
await localStorage.load();
}
},
async store(data) {
try {
const fileExists = await sp.web.getFolderByServerRelativePath(folderName).files.getByUrl(fileName).exists();
const content = JSON.stringify(data);
const folder = sp.web.getFolderByServerRelativePath(folderName);
if (fileExists) {
await folder.files.getByUrl(fileName).setContent(content);
} else {
await folder.files.addUsingPath(fileName, content)
console.log(`File ${fileName} created`);
}
// Update Pages state
setPages(editorRef.current.Pages.getAll())
} catch (err) {
console.error("Error on store : ", err);
// Fallback sur le localStorage
const localStorage = editorRef.current.Storage.get('local');
await localStorage.store(data, editorRef.current.Storage.getStorageOptions('local'));
}
},
});
// Commande pour sauvegarder manuellement le projet (à déclencher via un bouton)
editorRef.current.Commands.add("save-db", {
run: async (editor) => {
editor.store(editor.getProjectData);
},
});
const handleSave = () => {
if (editorRef.current) {
editorRef.current.Commands.run('save-db');
}
}
return () => {
editorRef.current && editorRef.current.destroy();
};
}, []);