Essayez NGTextEditor
Testez toutes les fonctionnalités en temps réel
Comment utiliser l'éditeur
Un éditeur basé sur des blocs et une grille de positionnement
Cet éditeur fonctionne avec un système de blocs positionnés sur une grille de 12 colonnes. Contrairement à un éditeur classique où vous pouvez écrire immédiatement, vous devez d'abord créer un bloc pour commencer à rédiger votre contenu.
Créer votre premier bloc
- Faites un clic droit n'importe où dans la zone d'édition
-
Un menu apparaît avec deux options :
- Bloc texte : pour rédiger du texte, créer des listes, insérer des citations, etc.
- Bloc média : pour insérer des images, vidéos, tableaux ou colonnes
- Choisissez le type de bloc souhaité
- Une fenêtre s'ouvre pour configurer la largeur du bloc (de 10% à 100% de la largeur disponible)
- Validez : une grille visuelle apparaît pour choisir l'emplacement de votre bloc
- Cliquez sur la position souhaitée dans la grille, et vous pouvez commencer à écrire ou insérer du contenu
La grille de positionnement
Lors de la création ou du déplacement d'un bloc, une grille visuelle s'affiche :
- Cases vertes : positions disponibles pour placer votre bloc
- Cases rouges : positions occupées par d'autres blocs
- "Insérer une ligne ici" : zones cliquables entre les lignes existantes pour créer une nouvelle ligne à cet endroit
- "Nouvelle ligne" : en bas de la grille, pour ajouter une ligne après les lignes existantes
Repositionner ou configurer un bloc
Chaque bloc possède un bouton engrenage (⚙) en haut à gauche. Ce bouton unique regroupe toutes les options :
- Repositionner le bloc sur la grille
- Modifier la largeur du bloc
- Ajouter ou modifier une image de fond
- Supprimer le bloc
Cette interface épurée avec un seul bouton permet de ne pas encombrer la zone d'édition.
Pourquoi ce système ?
Ce fonctionnement par blocs et grille vous permet de :
- Organiser votre mise en page avec précision grâce à la grille de 12 colonnes
- Placer des éléments côte à côte (par exemple, une image à 50% à côté d'un texte à 50%)
- Réorganiser facilement vos contenus via le bouton de configuration
- Structurer votre document de manière flexible
- Exporter en HTML et PDF de façon fiable et fidèle à ce qui est édité
Astuces
Voir les tutoriels vidéo
- Utilisez le bouton "Contours des blocs" dans la barre d'outils pour visualiser les limites de vos blocs (bleu pour texte, vert pour média)
- Vous pouvez imbriquer un bloc dans un autre bloc pour des mises en page complexes
- Les blocs se positionnent automatiquement sur la grille : si l'espace est insuffisant sur une ligne, le bloc passera à la ligne suivante
Testez l'éditeur ci-dessous
Aperçu en direct
Lecture seuleLe contenu de l'éditeur s'affichera ici en temps réel...
Intégration en 3 étapes
<!-- Importez les fichiers -->
<link
rel="stylesheet"
href="NGTextEditor.min.css"
>
<script
src="NGTextEditor.min.js"
></script>
<!-- Ajoutez la classe -->
<textarea
class="ngeditor"
id="my-editor"
data-ngte-config="/config/mon-editeur.json" ></textarea>
data-ngte-config="/config/mon-editeur.json" ></textarea>