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 ?