J’ai toujours eu du mal avec les éditeurs de texte enrichi, non pas parce qu’ils ne pouvaient pas faire le travail, mais parce que les faire fonctionner correctement avec Livewire a toujours été un défi pour moi. Je n'ai jamais vraiment compris comment rendre l'intégration propre, surtout avec mon QI limité 😅 et... mes connaissances en JavaScript.
Mais hier, j'ai découvert l'éditeur de texte enrichi Tiptap et je suis ravi car, croyez-le ou non, il prend en charge l'intégration Livewire prête à l'emploi ! Fini les solutions de ruban adhésif ou les heures passées à démêler le code spaghetti JavaScript. Pour la première fois, un éditeur de texte enrichi ne m’a pas donné envie de m’arracher les cheveux. En fait, j'ai réussi à le faire fonctionner du premier coup. Ouais, je sais, je n'y croyais presque pas moi-même. Cette fois, je n’ai même pas eu à remettre en question toute ma carrière de développeur ! Et comme toujours, je dois partager mes nouvelles connaissances avec vous ! 🤓 Commençons !
Pour cet exemple, nous allons créer un composant lame d'éditeur de texte enrichi minimal qui devrait "vivre" sous un composant livewire pour, disons, enregistrer une publication. Et ça va ressembler à ça
Nous nous concentrerons principalement sur un projet Laravel 11 - Livewire v3 TALL donc si vous êtes obsolète, eh bien... laravel shift est votre ami !
Je n'entrerai pas dans les détails ici car vous pouvez trouver tout ce que vous voulez sur l'éditeur de texte enrichi Tiptap en parcourant leur site Web. Ce que je souhaite souligner à propos de cet éditeur de texte enrichi est le suivant :
Créez exactement l'éditeur de texte enrichi que vous souhaitez à partir de blocs de construction personnalisables. Tiptap est livré avec des valeurs par défaut raisonnables, de nombreuses extensions et une API conviviale pour personnaliser chaque aspect. Tiptap propose à la fois des extensions open source et des extensions Pro disponibles via un compte Tiptap.
C'est pas cool les gars ? Ce petit paragraphe est ce qui a allumé le feu de ma curiosité et m'a poussé à explorer davantage.
Commençons par la configuration !
npm installe alpinejs @tiptap/core @tiptap/pm @tiptap/starter-kitLe package du kit de démarrage comprend les extensions les plus courantes pour démarrer rapidement. Pas besoin d'installer chacun d'eux individuellement. Cependant, plus tard dans l'exemple, nous installerons des extensions autonomes supplémentaires et vous verrez de quoi je parle.
Ensuite, accédez à votreapp.jsfichier et incluez les lignes suivantes :
importer './bootstrap'; // devrait déjà exister, ne collez pas ça :P import { Editor } from '@tip...
[Courte citation de 8% de l'article original]