Laravel - Installation et utilisation de TinyMCE

laravel févr. 18, 2020

Quand vous visitez des sites web,il vous arrive souvent de voir des éditeurs simples et qui misent en forme les textes, les images facilement on appelle ça un éditeur WYSIWYG.

Que ce qu'un éditeur WYSIWYG ?

Un éditeur WYSIWYG est une interface de saisie simple qui permet à l’utilisateur de créer, mettre en forme et voir le rendu d’un contenu web, sans connaitre le langage utilisé.

Quelques éditeurs

Voici une liste d’éditeur WYSIWYG que vous pouvez utiliser sur ton application

  • TinyMCE
  • Summernote
  • CkEditor

Installation de TinyMCE

Pour installer TinyMCE sur une application Laravel, nous avons besoin de NodeJS et de NPM ou YARN pour la gestion de dependence, assurez-vous qu'ils sont bien present sur votre système.

$ npm install tinymce

Rendez-vous au dossier node_modules/ vous allez voir un dossier nomé tinymce nous avons de copier certains fichiers pour ensuite les palcers dans le dossier public/

Copier les fichiers

Ouvrez le fichier webpack.mix.js et mettre

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');

Sur ton terminal/CMD exécuter cette commande

$ npm run dev

Utilisation de TinyMCE

La dernière étape pour pouvoir utiliser notre nouvel éditeur, ajouter le fichiers tinymce.js.

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

Creer un input de type textarea avec la classe description

<textarea class="description" name="description"></textarea>

Avec blade

<div class="input_wrap">
{!! Form::textarea('description',[
    'placeholder' => "Description",
    'id' => "description",
    'class' => "description"]);
!!}
</div>

N’hésitez pas de commenter si  vous avez des problèmes d'integration.

Happy coding!

Ousseynou Diop

Développeur d'applications Web Mobile et Formateur.