Integrate TinyMCE editor in your Laravel Installation with a fileManager

If you are somebody like me, that tries to make a demo out of every new technology I learn, and that too, classic blog.

So, my journey with Laravel also began by making a blog while learning the fundamentals of it.

Any CMS out there that has something like blog in their functionality would have an editor for users to type in their HTML. But as all other CMS have a basically a module from which you can upload your media files like images and files, with the first installation of Laravel, you won’t get that and you have make that on your own.

Or use a package like tinyMCE or CKeditor. These are some popular and free editors out there on the internet.

Here in this article, I would like to talk you through this process of installing an editor to go with your textarea field( or any other field for that matter ).

But not only editor, this editor will give you the power to upload files and link to content you are writing.

Let’s do this.


Steps:

I am considering you have a laravel installation and has a textarea field like below image.

Laravel installation without Editor
  • Go to Laravel File Manager Repo, and go to integration link in README.
  • On the integration Page, for TinyMCE4, they have given a script to load into your file. Just paste that script directly to your view and look you got yourself an editor.
  • But if you try to upload an image, it won’t happen as we haven’t installed the laravel-filemanager package to our laravel installation.
  • For that, first install the package using :
composer require unisharp/laravel-filemanager:~1.8

For laravel 5.5 and up this next point can be skipped.

  • Now you need to add it to your providers list, in config/app.php
Unisharp\Laravelfilemanager\LaravelFilemanagerServiceProvider::class,
Intervention\Image\ImageServiceProvider::class,

And add class alias

'Image' => Intervention\Image\Facades\Image::class,
  • You can now publish the package’s assests using
php artisan vendor:publish --tag=lfm_config
php artisan vendor:publish --tag=lfm_public
  • Now, it depends if you have a backend for your system where you want to show this filemanager or anyone could see this editor, for either case you need to modify the values of config/lfm.php to match your needs.
  • Like if the form is accessible to every user, you might want to remove the ‘auth’ entry in middleware array in config/lfm.php.
  • And if you remove ‘auth’, remember to set ‘false’ for ‘allow_multi_user’ field.
  • And voila, you got yourself a working editor with a filemanager.
Laravel with Editor

And

Editor With FileManager

Thanks for reading this article. Don’t forget to tell me where you used this editor and filemanager in your project and if it helped you guys, then clap for this article and share it.