Présentation de Pell : un éditeur WYSIWYG

Rivals

Rivals

Ancien staff
Inscription
27 Août 2016
Messages
1 706
Réactions
896
Points
13 104
logo.png


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.

demo.gif

​
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.
carbon.png
​
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 :
carbon (3).png

Capture d’e*cran 2018-03-17 a* 21.13.58.png
​
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 :
carbon (5).png

Capture d’e*cran 2018-03-17 a* 21.59.02.png

Capture d’e*cran 2018-03-17 a* 21.59.49.png

Capture d’e*cran 2018-03-17 a* 21.59.55.png
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:
D

deleted764555

Thibeault a dit:
Voir la pièce jointe 113110

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.

Voir la pièce jointe 113113
​
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.
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 :
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 :
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 ;)
 
Haut