Development

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;

Php
Node
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>