Comment installer et utiliser TinyMCE Editor dans Laravel

Dans le passé, j’ai publié un article Comment utiliser CKEditor dans Laravel. En référence à cet article, de nombreux lecteurs ont demandé d’écrire un article sur l’utilisation de l’ éditeur TinyMCE dans Laravel. TinyMCE est également l’un des éditeurs HTML WYSIWYG les plus populaires comme CKEditor. Dans cet article, nous étudions comment installer et utiliser l’éditeur TinyMCE dans l’application Laravel.

Lorsque nous travaillons sur le Web, nous devons parfois stocker du contenu long, des images et des extraits enrichis dans la base de données. Ce contenu peut être une biographie, un résumé de produit, un contenu de page, etc. Tous ces formats nécessitent l’utilisation de différentes balises HTML. La balise textarea de HTML n’est pas conviviale lorsqu’il s’agit d’écrire du contenu comprenant des éléments HTML. C’est ici que vous devez utiliser les éditeurs de texte Web.

TinyMCE et CKEditor sont des éditeurs populaires. A vous de choisir l’un ou l’autre. Les deux éditeurs WYSIWYG (ce que vous voyez est ce que vous obtenez) sont légers et fonctionnent parfaitement pour les applications Web.

L’éditeur TinyMCE est gratuit à utiliser avec les outils limités. Si vous souhaitez utiliser leurs plugins premium, veuillez consulter leur page de tarification.

Installer et utiliser TinyMCE Editor dans Laravel

Pour intégrer l’éditeur TinyMCE dans Laravel, je vais utiliser le package npm pour TinyMCE. Laravel fournit un support intégré pour npm. Tout ce dont vous avez besoin pour vous assurer que Node.js est installé sur votre système. Ouvrez le terminal dans le répertoire racine de votre projet et exécutez la commande pour installer d’abord les dépendances npm.

npm install

Après cela, installez TinyMCE à l’aide de npm par la commande :

npm i tinymce

Une fois terminé, si vous vous dirigez vers le répertoire "node_modules/tinymce", vous verrez quelques fichiers et dossiers. Nous devons en copier certains et les placer dans le répertoire ‘public’. Pour ce faire, ouvrez le webpack.mix.jsfichier et ajoutez-y le code ci-dessous.

webpack.mix.js

....
....
mix.copyDirectory('node_modules/tinymce/icons', 'public/node_modules/tinymce/icons');
mix.copyDirectory('node_modules/tinymce/plugins', 'public/node_modules/tinymce/plugins');
mix.copyDirectory('node_modules/tinymce/skins', 'public/node_modules/tinymce/skins');
mix.copyDirectory('node_modules/tinymce/themes', 'public/node_modules/tinymce/themes');
mix.copy('node_modules/tinymce/jquery.tinymce.js', 'public/node_modules/tinymce/jquery.tinymce.js');
mix.copy('node_modules/tinymce/jquery.tinymce.min.js', 'public/node_modules/tinymce/jquery.tinymce.min.js');
mix.copy('node_modules/tinymce/tinymce.js', 'public/node_modules/tinymce/tinymce.js');
mix.copy('node_modules/tinymce/tinymce.min.js', 'public/node_modules/tinymce/tinymce.min.js');

Dans le code ci-dessus, nous utilisons la fonctionnalité Compiling Assets (Mix) de Laravel.

Ensuite, exécutez la commande qui copie les fichiers et dossiers de ‘node_modules/tinymce’ vers le répertoire ‘public’.

npm run dev

Nous sommes maintenant prêts à utiliser l’éditeur TinyMCE dans le fichier blade. Incluez le tinymce.jsfichier et appelez l’éditeur comme suit.

<textarea class="description" name="description"></textarea>
<script src="{{ asset('node_modules/tinymce/tinymce.js') }}"></script>
<script>
    tinymce.init({
        selector:'textarea.description',
        width: 900,
        height: 300
    });
</script>

Vous devriez maintenant voir l’éditeur TinyMCE sur votre page, tout comme la capture d’écran ci-dessous.

Installer TinyMCE à l’aide du CDN

Jusqu’à présent, nous avons vu comment installer l’éditeur TinyMCE à l’aide de npm, ce qui est une méthode recommandée. Une autre façon d’utiliser TinyMCE est via CDN. En utilisant CDN, vous n’avez pas besoin de conserver les fichiers de bibliothèque sur votre serveur. Il inclut directement les fichiers requis à partir d’un serveur hébergé.

L’utilisateur peut utiliser TinyMCE via CDN comme suit.

<textarea class="description" name="description"></textarea>
<script src="https://cloud.tinymce.com/stable/tinymce.min.js"></script>
<script>
    tinymce.init({
        selector:'textarea.description',
        width: 900,
        height: 300
    });
</script>

C’est ça! J’espère que vous comprenez comment installer et utiliser l’éditeur TinyMCE dans Laravel. J’aimerais entendre vos pensées et suggestions dans la section des commentaires ci-dessous.

Articles Liés

• Trix – Un éditeur WYSIWYG Open Source pour les sites Web
• Créer un site Web multilingue en PHP à l’aide du framework Laravel
• Comment utiliser la fonctionnalité de connexions à plusieurs bases de données de Laravel sur un site Web