Editor.js est une librairie JavaScript de gestion de contenu par blocs — similaire à l’éditeur de Notion. Ce tutoriel montre comment l’intégrer dans une application Symfony 6 pour créer un clone de Notion avec authentification, création et modification de pages.

Fonctionnalités du clone Notion

  • Inscription / Connexion avec Symfony Security
  • Création de pages avec titre et clé unique
  • Éditeur de blocs Editor.js : paragraphes, titres, listes, code
  • Sauvegarde des blocs en base de données via Doctrine (format JSON)
  • Rechargement du contenu depuis la base de données à l’ouverture d’une page

Installation avec Webpack Encore

# Webpack Encore pour bundler le JavaScript
composer require symfony/webpack-encore-bundle

# Packages Editor.js
npm install @editorjs/editorjs @editorjs/header @editorjs/list @editorjs/code

Initialiser Editor.js

import EditorJS from '@editorjs/editorjs';
import Header from '@editorjs/header';

const editor = new EditorJS({
  holder: 'editorjs',
  tools: { header: Header },
});

Chaque bloc est représenté par un objet JSON (type + data). Ces données sont envoyées au serveur Symfony via AJAX et stockées dans un champ texte en base de données. Au rechargement, les blocs sont restaurés depuis ce JSON.

Architecture Symfony

  • Entité Page avec les champs title et content (JSON)
  • Contrôleur avec routes GET /pages/{id} et POST /pages/{id}/save
  • Template Twig avec le conteneur #editorjs et le chargement du bundle JS

Pour aller plus loin

Editor.js propose des dizaines de plugins additionnels (image, tableau, embed). Retrouvez le code source et la démo sur YouTube.