In this tutorial, i’ll show you how to integrate tinymce editor in your laravel application. Tinymce is the most advanced and popular and free wysiwyg html editor.

All CMS for example WordPress has a module from which you can upload your media files like images and you can insert images inside editor. We are going to add file manager / image upload functionality to our editor.

Let’s do this.

Firstly, add this code to your blade file

Add this code to your web route in web.php.

Next create view.blade.php and add this code

Now when you run the code you will see this result below.

Good, tinymce is working. Let’s add post route to test our save button.

Now when you hit the save button you will see the tinymce content on the page. Great 😀.

Our next step is to add image upload fonctionality to our tinymce.

We need to add this package to our laravel project.

Execute this command to install the package

For laravel 5.5 and up providers list and class alias step can be skipped.

Add it to your providers list, in config/app.php

And add class alias

Now publish the package’s assests using

After that we need to make small change for our example. Go to config/lfm.php file

We removed auth middleware because we are not not using authentication in this example.

We’re almost done. Last step is to add file browser callback to tinymce config

This is full page blade updated

And voila, you got yourself a working editor with a filemanager.

You have now fully working file manager / image uploader inside your tinymce.

Wait, we have to talk about security. Tinymce escape script tag automatically, but we need to add layer of security to avoid Cross-Site Scripting (XSS) Vulnerability.

HTMLPurifier is a well maintained tool that cleans up code and even fixes things like missing html tags or illegal html nesting.
 

 
Run this command to add HTMLPurifier

For laravel 5.5 and up providers list and class alias step can be skipped.

Add it to your providers list, in config/app.php

And add class alias

The default configuration for Purifier allows particular html elements and attributes to be used and some css styling as well.

If you want to make changes to the default configuration you can easily customize the configuration by publishing the configuration script using the command line:

This creates a new file at config/purifier.php.

Let’s edit show.blade.php and use Purifier like this to clean the variable:

This will take our piece of data and run it through the HTMLPurifier and based on our configuration will remove any unapproved html elements or attributes and clean up the code so it is standards compliant.

Thanks for reading this article. Don’t forget to tell me where you used this editor and filemanager in your project.