• A la une
  • Catégories
  • Dossiers
  • +

Découvrez Tiptap, un éditeur de texte sous forme de composant Vue

par Benjamin SANCHEZle 09/10/2018

Aujourd'hui, le BlogDuWebdesign vous propose de découvrir Tiptap, un éditeur de texte riche sous forme de composant Vue.js très simple à étendre et personnaliser

Tiptap, un éditeur de texte riche pour Vue.js

Tictap est un composant pour Vue.js qui vous permettra d'intégrer très simplement un éditeur de texte riche multi-fonctions à vos projets. Ses avantages les plus flagrants sont une grande simplicité d'utilisation et de personnalisation, ainsi qu'une grande batterie d'extensions fournies.

Besoin d'un éditeur WYSIWYG complet avec barre d'outils, comme sur l'image ci-dessus ? Pas de soucis, ajoutez simplement des boutons en Vue.

Vous préferiez un module de bulle au survol comme sur l'éditeur de medium , ou un simple support du Markdown ? Pas de soucis, chargez juste les bonnes extensions et vous êtes bon.

L'éditeur va vraiment loin et fournit aussi entre autres une coloration syntaxique pour différents langages basés sur highlight.js. Cet exemple est particulièrement intéressant car il montre assez clairement comment intégrer une ressource externe sous la forme d'une extension à tictac.

 

D'un point de vue intégration, tictap est extrêmement simple à personnaliser et étendre. Pour vous en convaincre, je vous propose de jeter un oeil au HTML correspondant à l'exemple "simple", celui avec la barre d'outils. Vous y verrez comment ajouter des extensions ainsi que leur lier un bouton.

Notez qu'il serait très simple d'y ajouter également un raccourci-clavier avec Mousetrap, comme expliqué dans l'article Comment créer des raccourcis claviers très simplement avec Vue.js ?

  • Partager l'article en 1 clic !

    N'hésitez pas à aider le BlogDuWebdesign
Avatar_thumbAuteur : Benjamin voir son blog

Développeur autodidacte depuis quelques années, déjà, je suis le développeur du blog du webdesign, où mon rôle est de concretiser les différentes idées et maquettes.

Devenez membre !

Rejoignez la communauté des créatifs du web !
- Partagez vos créations
- Gagnez en visibilité
- Créez votre blog facilement
> En savoir plus

Créer mon compte
twitter birdtwitter birdtwitter birdtwitter birdtwitter bird
twitter bird
Ouvrir