Introduction

​

Fonctionnalités du plugin

GrapesJS est un éditeur de pages web open-source conçu pour faciliter la création de modèles HTML visuels. Il permet aux utilisateurs de construire des pages web sans avoir à écrire de code en manipulant directement des éléments graphiques via une interface visuelle.

Le but est de créer des composants React et des templates préfaits et permettre leur utilisation via GrapeJS.

​

Liens utiles

GrapeJS : https://grapesjs.com/
Documentation GrapeJS : https://grapesjs.com/docs/
Gitlab : https://gitlab.webexpr.fr/webexpr/sharepoint/2024-react-spfx-mon-super-site/-/tree/feature/grapejs/src?ref_type=heads

​

Les notions clés

​

Canvas :

Le Canvas est l’interface qui permet de créer les templates via le drag & drop des blocks.

​

Blocks :

Un Block est un composant HTML réutilisable que l’on peut glisser dans le Canvas. Un Block peut être par exemple un texte, une image, un iframe, mais aussi un composant React.

​

Components :

Lorsque un Block est glissé dans le Canvas, il devient un Component GrapeJS. Ce Component est un object contenant des informations sur son cycle de vie et sa présentation finale.

​

Storage Manager :

Le Storage Manager s’occupe du processus de chargement et de sauvegarde des données du projet (images, pages, styles…). Par défaut, il utilise le localStorage, mais dans notre cas, nous allons le configurer pour intéragir avec Sharepoint.