---
title: 'Créer un clone de Notion avec Symfony 6 et Editor.js'
description: "Créer un clone de Notion avec Symfony 6 et Editor.js : éditeur de blocs JavaScript, sauvegarde en base de données avec Doctrine et système d'authentification."
pubDate: 2022-12-03
family: 'php-symfony'
tags: []
heroImage: /images/creer-un-clone-de-notion-avec-symfony-6-et-editor-js.webp
videoUrl: 'https://youtu.be/ubgwWkjKirY'
---

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

```bash
# 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

```javascript
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](https://youtu.be/ubgwWkjKirY).