Présentation de Pell : un éditeur WYSIWYG

Rivals

Rivals

Ancien staff
Inscription
27 Août 2016
Messages
1 706
Réactions
899
Points
15 514
RGCoins
992
You must be registered for see images attach


Pell est un éditeur WYSIWYG (What You See Is What You Get) ne possédant aucune dépendance et ayant la particularité d'être facilement personnalisable et léger.

You must be registered for see images attach

​
INFORMATIONS
  • 8'000 sur Github,
  • Aucune dépendance,
  • 1.38kB,
  • Utilise les normes ES6,
  • Facilement customizable,
  • Support sous de nombreux navigateurs (IE 9+ (théoriquement), Chrome 5+, Firefox 4+, Safari 5+, Opera 11.6+).
INSTALLATION

NPM

npm install pell --save​

CDN
HTML: 
<!-- PELL:CSS !-->
<link rel="stylesheet" type="text/css" href="https://unpkg.com/pell/dist/pell.min.css">[/FONT]

[FONT=arial]<!-- PELL:JS !-->
<script src="https://unpkg.com/pell"></script>


MISE EN SITUATION

Pour vous démontrer sa facilité d'intégration je vais tout d'abord vous montrer comment intégrer cet éditeur par le biais de Laravel mais cela ne vous empêchera pas de pouvoir l'intégrer sur n'importe quel de vos projets.

1. Pour ma part je vais l'inclure dans ma page via le CDN unpkg.
You must be registered for see images attach
​
Comme vous aurez pu le voir je me suis déjà pas mal avancé sur l'intégration de l'éditeur, en effet j'ai :
  • Crée un formulaire qui va contenir un champs de type textarea que nous n'afficherons pas à l'utilisateur, cet élément contiendra l'HTML de sortie de l'éditeur,
  • Crée un bouton de soumission du formulaire possédant un attribut onclick pour que lorsqu'un clique est effectué sur ce bouton, le formulaire soit soumis (comme @Nekes` ?).
2. Le fichier editor.js a pour l'instant ce contenu :
You must be registered for see images attach

You must be registered for see images attach
​
L'intégration est maintenant terminée, modifions le comportement du bouton "C" qui pour le moment n'affiche qu'un message en console. :)

AJOUT D'UN BOUTON YOUTUBE

Nous allons modifier le bouton "C" afin qu'il puisse intégrer des vidéos YouTube, pour se faire nous n'avons qu'à écrire 5 lignes dans le fichier editor.js comme ceci :
You must be registered for see images attach

You must be registered for see images attach

You must be registered for see images attach

You must be registered for see images attach
MISE EN GARDE

Pell n'est qu'un éditeur WYSIWYG, veillez à ne pas faire confiance à l'HTML que vous récupérez. Je vous invite à utiliser un HTML Purifier pour utiliser ou non les balises de votre choix. ;)

Bonne soirée,
Thibeault
 
Dernière édition:
Thibeault a dit:
You must be registered for see images attach


Pell est un éditeur WYSIWYG (What You See Is What You Get) ne possédant aucune dépendance et ayant la particularité d'être facilement personnalisable et léger.

You must be registered for see images attach

​
INFORMATIONS
  • 8'000 sur Github,
  • Aucune dépendance,
  • 1.38kB,
  • Utilise les normes ES6,
  • Facilement customizable,
  • Support sous de nombreux navigateurs (IE 9+ (théoriquement), Chrome 5+, Firefox 4+, Safari 5+, Opera 11.6+).
INSTALLATION

NPM

npm install pell --save​

CDN
HTML: 
<!-- PELL:CSS !-->
<link rel="stylesheet" type="text/css" href="https://unpkg.com/pell/dist/pell.min.css">[/FONT][/FONT]

[FONT=arial][FONT=arial]<!-- PELL:JS !-->
<script src="https://unpkg.com/pell"></script>

MISE EN SITUATION

Pour vous démontrer sa facilité d'intégration je vais tout d'abord vous montrer comment intégrer cet éditeur par le biais de Laravel mais cela ne vous empêchera pas de pouvoir l'intégrer sur n'importe quel de vos projets.

1. Pour ma part je vais l'inclure dans ma page via le CDN unpkg.
You must be registered for see images attach
​
Comme vous aurez pu le voir je me suis déjà pas mal avancé sur l'intégration de l'éditeur, en effet j'ai :
  • Crée un formulaire qui va contenir un champs de type textarea que nous n'afficherons pas à l'utilisateur, cet élément contiendra l'HTML de sortie de l'éditeur,
  • Crée un bouton de soumission du formulaire possédant un attribut onclick pour que lorsqu'un clique est effectué sur ce bouton, le formulaire soit soumis (comme @Nekes` ?).
2. Le fichier editor.js a pour l'instant ce contenu :
You must be registered for see images attach

You must be registered for see images attach
​
L'intégration est maintenant terminée, modifions le comportement du bouton "C" qui pour le moment n'affiche qu'un message en console. :)

AJOUT D'UN BOUTON YOUTUBE

Nous allons modifier le bouton "C" afin qu'il puisse intégrer des vidéos YouTube, pour se faire nous n'avons qu'à écrire 5 lignes dans le fichier editor.js comme ceci :
You must be registered for see images attach

You must be registered for see images attach

You must be registered for see images attach

You must be registered for see images attach
MISE EN GARDE

Pell n'est qu'un éditeur WYSIWYG, veillez à ne pas faire confiance à l'HTML que vous récupérez. Je vous invite à utiliser un HTML Purifier pour utiliser ou non les balises de votre choix. ;)

Bonne soirée,
Thibeault
Cliquez pour agrandir...
Merci pour le tuto ;)
 
Good tuto Rivals ??
 
Retour
Haut