How to add TinyMCE in Laravel

TinyMce is a rich content editor being widely used in various web applications. This tutorial covers how we can integrate TinyMCE in a Laravel project. Before we start, we assume that you have already installed the following dependencies;

  1. Php
  2. Node
  3. Composer
  • Now let’s create a fresh installation of Laravel using the following composer command 
composer create-project laravel/laravel project
  • Let’s change the current directory to Laravel installation directory using the command cd
Cd project
  • Now to open the current folder in VS Code Studio using the following command
Code .
  • Next, Install the node package manager using vs code terminal
npm install
  • Add TinyMCE package to project using composer command

composer require tinymce/tinymce

  • Open the webpack.mix.js and add following line
mix.copyDirectory('vendor/tinymce/tinymce', 'public/js/tinymce');

this will copy all tinymce required files in public folder that will be used in later stage

  • To copy files to public folder use following Mix command
npx mix
  • Now open the blade template of your choice and add the following Html
<form method=”post”>

   <textarea id=”editor”>My first content line!</textarea>

 </form>
  • Now it’s time to add js code to your blade template. Add the following to head <head> or the end of <body> tag.
<script src=”{{ asset(‘js/tinymce/tinymce.min.js’) }}” referrerpolicy=”origin”></script>

 <script>

   tinymce.init({

     selector: ‘textarea#editor, // Replace this CSS selector to match the placeholder element for TinyMCE

     plugins: ‘code table lists’,

     toolbar: ‘undo redo | formatselect| bold italic | alignleft aligncenter alignright | indent outdent | bullist numlist | code | table’

   });

 </script>
  • Now finally, run the server to see if all is working fine.
php artisan serve