Connexion
S'inscrire
Actualités
Quoi de neuf
Activités générales
Auteurs
Forums
Nouveaux messages
Rechercher un forum
Quoi de neuf
Nouveaux messages
Nouveaux messages de profil
Activités générales
Membres
Membres inscrits
Visiteurs actuels
Nouveaux messages de profil
Rechercher dans les messages des profils
Teams
Créé ton équipe
Quoi de neuf ?
Nouveaux messages
Rechercher un forum
Menu
Connexion
S'inscrire
Install the app
Install
Forums
Forums généraux
Informatique
Développement
Présentation de Pell : un éditeur WYSIWYG
JavaScript is disabled. For a better experience, please enable JavaScript in your browser before proceeding.
Vous utilisez un navigateur non à jour ou ancien. Il ne peut pas afficher ce site ou d'autres sites correctement.
Vous devez le mettre à jour ou utiliser un
navigateur alternatif
.
Répondre à la discussion
Message
<blockquote data-quote="Rivals" data-source="post: 7284204" data-attributes="member: 694298"><p style="text-align: center"><span style="font-family: 'arial'">[ATTACH=full]113110[/ATTACH]</span></p> <p style="text-align: center"></p> <p style="text-align: center"><span style="font-family: 'arial'"><strong>Pell</strong> est un éditeur WYSIWYG (<em>What You See Is What You Get</em>) ne possédant aucune dépendance et ayant la particularité d'être facilement personnalisable et léger.</span></p> <p style="text-align: center"></p> <p style="text-align: center"><span style="font-family: 'arial'">[ATTACH=full]113113[/ATTACH]</span></p> <p style="text-align: center"></p><p><span style="font-family: 'arial'">[FA]fa-info fa-border[/FA] <strong>INFORMATIONS</strong></span></p><ul> <li data-xf-list-type="ul"><span style="font-family: 'arial'">8'000 [FA]fa-star[/FA] sur Github,</span></li> <li data-xf-list-type="ul"><span style="font-family: 'arial'">Aucune dépendance,</span></li> <li data-xf-list-type="ul"><span style="font-family: 'arial'">1.38kB,</span></li> <li data-xf-list-type="ul"><span style="font-family: 'arial'">Utilise les normes ES6,</span></li> <li data-xf-list-type="ul"><span style="font-family: 'arial'">Facilement customizable,</span></li> <li data-xf-list-type="ul"><span style="font-family: 'arial'">Support sous de nombreux navigateurs (IE 9+ (théoriquement), Chrome 5+, Firefox 4+, Safari 5+, Opera 11.6+).</span></li> </ul><p><span style="font-family: 'arial'">[FA]fa-border fa-upload[/FA] <strong>INSTALLATION</strong></span></p><p></p><p><span style="font-family: 'arial'"><strong>NPM</strong></span></p><p></p><p style="margin-left: 20px"><span style="font-family: 'arial'"><code>npm install pell --save</code></span></p><p></p><p><span style="font-family: 'arial'"><strong>CDN</strong></span></p><p><span style="font-family: 'arial'">[CODE=html]<!-- PELL:CSS !--></span></p><p><span style="font-family: 'arial'"><link rel="stylesheet" type="text/css" href="https://unpkg.com/pell/dist/pell.min.css">[/FONT]</span></p><p><span style="font-family: 'arial'"></span></p><p><span style="font-family: 'arial'">[FONT=arial]<!-- PELL:JS !--></span></p><p><span style="font-family: 'arial'"><script src="https://unpkg.com/pell"></script></span></p><p><span style="font-family: 'arial'">[/CODE]</span></p><p></p><p></p><p><span style="font-family: 'arial'">[FA]fa-code fa-border[/FA] <strong>MISE EN SITUATION</strong></span></p><p></p><p><span style="font-family: 'arial'">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 <strong>cela ne vous empêchera pas de pouvoir l'intégrer sur n'importe quel de vos projets</strong>.</span></p><p></p><p><span style="font-family: 'arial'">1. Pour ma part je vais l'inclure dans ma page via le CDN <em>unpkg</em>.</span></p><p style="text-align: center"><span style="font-family: 'arial'">[ATTACH=full]113131[/ATTACH]</span></p><p><span style="font-family: 'arial'">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 :</span></p><ul> <li data-xf-list-type="ul"><span style="font-family: 'arial'"><strong>Crée un formulaire </strong>qui va contenir un champs de type <em>textarea</em> que nous n'afficherons pas à l'utilisateur, cet élément contiendra l'HTML de sortie de l'éditeur,</span></li> <li data-xf-list-type="ul"><span style="font-family: 'arial'"><strong>Crée un bouton de soumission</strong> du formulaire possédant un attribut <em>onclick</em> pour que lorsqu'un clique est effectué sur ce bouton, le formulaire soit soumis (comme [USER=577633]@Nekes` ?[/USER]).</span></li> </ul><p><span style="font-family: 'arial'">2. Le fichier <em>editor.js </em>a pour l'instant ce contenu :</span></p><p style="text-align: center"><span style="font-family: 'arial'">[ATTACH=full]113134[/ATTACH]</span></p> <p style="text-align: center"><span style="font-family: 'arial'">[ATTACH=full]113118[/ATTACH]</span></p><p><span style="font-family: 'arial'">L'intégration est maintenant terminée, modifions le comportement du bouton "C" qui pour le moment n'affiche qu'un message en console. <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="smilie smilie--sprite smilie--sprite355" alt=":)" title=":) :)" loading="lazy" data-shortname=":)" /></span></p><p></p><p><span style="font-family: 'arial'">[FA]fa-youtube fa-border[/FA] <strong>AJOUT D'UN BOUTON YOUTUBE</strong></span></p><p></p><p><span style="font-family: 'arial'">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 :</span></p><p style="text-align: center"><span style="font-family: 'arial'">[ATTACH=full]113136[/ATTACH]</span></p> <p style="text-align: center">[ATTACH=full]113128[/ATTACH]</p> <p style="text-align: center">[ATTACH=full]113129[/ATTACH]</p> <p style="text-align: center">[ATTACH=full]113130[/ATTACH]</p><p><span style="font-family: 'arial'"><strong><span style="color: rgb(184,49,47)">[FA]fa-warning fa-border[/FA] MISE EN GARDE</span></strong></span></p><p></p><p><span style="font-family: 'arial'">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. <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="smilie smilie--sprite smilie--sprite351" alt=";)" title="Clin d'oeil ;)" loading="lazy" data-shortname=";)" /></span></p><p></p><p>Bonne soirée,</p><p><em>Thibeault</em></p></blockquote><p></p>
[QUOTE="Rivals, post: 7284204, member: 694298"] [CENTER][FONT=arial][ATTACH=full]113110[/ATTACH][/FONT] [FONT=arial][B]Pell[/B] est un éditeur WYSIWYG ([I]What You See Is What You Get[/I]) ne possédant aucune dépendance et ayant la particularité d'être facilement personnalisable et léger.[/FONT] [FONT=arial][ATTACH=full]113113[/ATTACH][/FONT] [/CENTER] [FONT=arial][FA]fa-info fa-border[/FA] [B]INFORMATIONS[/B][/FONT] [LIST] [*][FONT=arial]8'000 [FA]fa-star[/FA] sur Github,[/FONT] [*][FONT=arial]Aucune dépendance,[/FONT] [*][FONT=arial]1.38kB,[/FONT] [*][FONT=arial]Utilise les normes ES6,[/FONT] [*][FONT=arial]Facilement customizable,[/FONT] [*][FONT=arial]Support sous de nombreux navigateurs (IE 9+ (théoriquement), Chrome 5+, Firefox 4+, Safari 5+, Opera 11.6+).[/FONT] [/LIST] [FONT=arial][FA]fa-border fa-upload[/FA] [B]INSTALLATION[/B][/FONT] [FONT=arial][B]NPM[/B][/FONT] [INDENT][FONT=arial][ICODE]npm install pell --save[/ICODE][/FONT][/INDENT] [FONT=arial][B]CDN[/B] [CODE=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> [/CODE][/FONT] [FONT=arial][FA]fa-code fa-border[/FA] [B]MISE EN SITUATION[/B][/FONT] [FONT=arial]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 [B]cela ne vous empêchera pas de pouvoir l'intégrer sur n'importe quel de vos projets[/B].[/FONT] [FONT=arial]1. Pour ma part je vais l'inclure dans ma page via le CDN [I]unpkg[/I].[/FONT] [CENTER][FONT=arial][ATTACH=full]113131[/ATTACH][/FONT][/CENTER] [FONT=arial]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 :[/FONT] [LIST] [*][FONT=arial][B]Crée un formulaire [/B]qui va contenir un champs de type [I]textarea[/I] que nous n'afficherons pas à l'utilisateur, cet élément contiendra l'HTML de sortie de l'éditeur,[/FONT] [*][FONT=arial][B]Crée un bouton de soumission[/B] du formulaire possédant un attribut [I]onclick[/I] pour que lorsqu'un clique est effectué sur ce bouton, le formulaire soit soumis (comme [USER=577633]@Nekes` ?[/USER]).[/FONT] [/LIST] [FONT=arial]2. Le fichier [I]editor.js [/I]a pour l'instant ce contenu :[/FONT] [CENTER][FONT=arial][ATTACH=full]113134[/ATTACH] [ATTACH=full]113118[/ATTACH][/FONT][/CENTER] [FONT=arial]L'intégration est maintenant terminée, modifions le comportement du bouton "C" qui pour le moment n'affiche qu'un message en console. :)[/FONT] [FONT=arial][FA]fa-youtube fa-border[/FA] [B]AJOUT D'UN BOUTON YOUTUBE[/B][/FONT] [FONT=arial]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 :[/FONT] [CENTER][FONT=arial][ATTACH=full]113136[/ATTACH][/FONT] [ATTACH=full]113128[/ATTACH] [ATTACH=full]113129[/ATTACH] [ATTACH=full]113130[/ATTACH][/CENTER] [FONT=arial][B][COLOR='rgb(184,49,47)'][FA]fa-warning fa-border[/FA] MISE EN GARDE[/COLOR][/B][/FONT] [FONT=arial]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. ;)[/FONT] Bonne soirée, [I]Thibeault[/I] [/QUOTE]
Insérer les citations…
Vérification
Publier la réponse
Forums
Forums généraux
Informatique
Développement
Présentation de Pell : un éditeur WYSIWYG
Ce site utilise des cookies. En continuant à utiliser ce site, vous acceptez l'utilisation des cookies.
Acceptez
En savoir plus.…
Haut