A la recherche d'un éditeur WYSIWYG à intégrer dans un back-office pour un projet avec Laravel, je suis tombé sur ce package : Laraberg [https://github.com/VanOns/laraberg].

Ce projet vise à fournir un moyen simple d'intégrer le nouvel éditeur de bloc Gutenberg (éditeur/page  de Wordpress) [https://fr.wordpress.org/gutenberg/] à des projets Laravel.

‍

On y retrouve tous les blocs de bases, la création de bloc custom et mise en place d’une bibliothèque d’image ou encore gestion Server Side blocks. Il semblerait que je sois tombé sur un des éditeurs les plus complets qu’on puisse mettre en place dans un back-office Laravel.

Dans cet article je vous propose de faire le tour du projet, de le tester dans un projet de blog simple et d’essayer de faire le tour des atouts et des freins de l’outil.

Récemment passé en V2 l’utilisation de Laraberg à été fondamentalement revu et son utilisation devient très interessante.

Sommaire

1. Prérequis
2. Installation
3. Un back-office minimaliste dans un projet Laravel basique
4. Configuration avancée de Laraberg
5. Intégration dans un gestionnaire de CRUD comme Filament vs Voyager
6. Notre avis

1. Prérequis

L’installation de Laraberg nécessite d'installer au préalable un projet Laravel from scratch.

2. Installation

• Installez le package à l'aide de composer
• Ajoutez des fichiers fournisseur à votre projet (CSS, JS & Config)
• Importer le script et la feuille du style du package dans le layout par exemple
• L'éditeur Gutenberg s'attend à ce que React, ReactDOM et JQuery soient dans l'environnement dans lequel il s'exécute.
• Mettre en place un fichier laraberg.js contenant la création de l’éditeur avec un id
• Comme pour n’importe quel WYSIWYG Il suffit désormais d’initialiser dans une page pour avoir un éditeur Gutenberg visible.

3.  Un back-office minimaliste dans un projet Laravel basique

Afin d’illustrer le projet, j’ai choisis de réaliser un blog de base qui puisse permettre à l’utilisateur de se connecter et d’accéder au panneau d'administration de son blog.

Authentification

Pour faire simple j’ai donc décidé d’implémenter le système d’authentification Breeze de Laravel (  https://laravel.com/docs/9.x/starter-kits#laravel-breeze )

Breeze a l’avantage (comme Jetstream) de venir avec ses vues d’authentification, son système de layout et avec la librairie Tailwind.css préinstallé.

Au besoin, si comme moi vous n'êtes pas fan de Tailwind vous pouvez facilement supprimer les classes Tailwind des templates avec ce package : https://github.com/JohnnyWalkerDesign/Laravel-Breeze-Classless

Système de Post

Afin d’illustrer l’expérience je suis parti sur un blog avec un model Post géré par les ressources d’un CRUD classique dans un PostController.

Le blog a désormais un système d’authentification, un gestionnaire d’articles (create, read, update delete) avec un éditeur Gutenberg pour créer le contenu des articles.

L'editeur Gutenberg embarqué fonctionne de la même manière que dans Wordpress, il enregistre donc dans la base de données des éléments sous le format :

‍

<!- wp:paragraph><p>test</p><!-- /wp:paragraph>

‍

Il est également possible de rendre le contenu dans une autre colonne de son choix en ajoutant la propriété protected $contentColumn = 'my_column'; sur le modèle concerné.

4. Configuration avancée de Laraberg

L’initilisation de Gutenberg peut se faire via un tableau d’options avec l’interface EditorSettings de Laraberg.

Pour mon exemple j’ai testé plusieurs fonctionnalités :

‍

‍

Utilisations des ressources Wordpress

Ces resources vont pemettre de développer de la meme manière que sur Wordpress différentes fonctionnalités disponibles sur Gutenberg (Blocs personnalisés, serverside blocks, hooks et filters, components)

Le package dispose d’un accès à 7 ressources :

5. Intégration dans un gestionnaire de CRUD

A ce stade on dispose d’un back-office opérationnel avec un éditeur Gutenberg en guise d’éditeur.

Tout s’enregistre en base et est utilisable pour rédiger un site.

L’idée suivante était d’utiliser la bibliothèque Filament pour obtenir un CRUD avancé qui gère les ressources des modèles et qui puissent inclure un champ personnalisé en remplaçant l’éditeur de la lib par Gutenberg.

Laravel  - Filament [https://filamentphp.com]

Filament est un package de CRUD qui permet de créer un back-office rapidement qui respecte le preset TALL Stack (Tailwind, Alpine, Laravel, Livewire) https://tallstack.dev/

Il est possible de rédiger à peu près tous les types de champs à partir du package initial. Les champs de type Editeur utilise Trix Editor, je le remplace donc par l'éditeur Gutenberg .

Filament propose des champs personnalisé que l’on peut appeler sur les formulaires de son choix.

Je ne vais pas forcément développer sur les méthodes employées car les résultats n’ont pas été très concluants.

Laravel - Voyager [https://voyager.devdojo.com]

Il faut tout d'abord installer Voyager puis installer Laraberg - cf. Chapitre "installer laraberg" et finalemetn mettre en place un formField personnalisé

• La classe App\FormFields\GutenbergFormField.php permet de déclarer un nouveau FormField
• On déclare le formField dans AppServiceProvider
• On créé la vue formfields/gutenbergField.blade.php  avec les données et la logique qui permettent à voyager de reconnaître les propriétés de l'éditeur Gutenberg

Désormais, Voyager reconnaît dans son menu BREAD, le champ GutenbergFormField.

Si j’associe « content » avec le champ Gutenberg, l’éditeur apparaît pour le champ contenu dans le create, ou dans l’édit.

6. Notre avis

Cette solution s'avère très prometteuse. Le fait de pouvoir proposer à nos clients un éditeur de page aussi puissant que celui de Wordpress est un véritable plus. Techniquement l'intégration est assez simple, il restera à voir sur la durée le coté maintenable d'un tel outil

‍