Today in this tutorial we are going to see how we are going to install tinymce in laravel. One good thing about tinymce is that it is very light weight and can be easily used across any website.
Most popular CMS like WordPress also use it as their editor to add content in the website. If it is integrated with responsive file manager plugin it would be even better to upload images via file manager.
Lets get started :-
What we are going to do ?
- Download Lightweight version of tinymce from here.
- Download Responsive File manager plugin from here. here
It is very easy to integrate tinymce in laravel. I had even break down them in small steps so that you could easy understand it.
Get your things ready and head over to first step.
Step 1:-
Extract the zip package inside the public folder of laravel project directory. Your laravel public directory and tinymce directory would look like the image below :-
Step 2 :-
Once you have extracted the package exactly like the image above, now its time to call the plugins in your header area. Initiate the js call using the codes below.
Now use the selector as and id in your textarea like below :-
This is pretty much to add the tinymce editor in your textarea. You can do almost all the things except uploading files and images with the editor.
How to Integrate Responsive File manager with TinyMCE ?
Since,we have integrated tinymce with textarea as our editor, we still cant upload any files and images with the editor.
To enable file-manager in tinymce we are going to use third party plugin called responsive file-manager inside tinymce to let us to uploads directly through the editor.
Step 1 :-
Take this step very carefully !! There are two things that needs to be done in this step.
First, extract responsive file manager zip package. There are minimum 4 folders two of them are named file manager and tinymce.
Go inside tinymce and inside plugins folder and copy that responsivefilemanager folder inside laravel public/tinymce/plugins folder and paste it.
Next, step is to copy the file manager folder into the public folder inside tinymce.
After you place the plugins files and folders correctly like above its time to initialize the plugin and set the base path.
Lets add the codes provided by responsive file manager to enable file manager inside the editor and initiate the call.
Once you have integrated the file manager code and initiated the call, its time to fix the base path for image. Go to public\tinymce\filemanager\config\config.php
Find this piece of code in config.php
And replace with this
Thats it, Save up everything and try reloading the browser to check the textarea to see if the editor and file manager have been enabled or not.
Take a look at full code below :-
If you have any problem you can mention it via comments.
Leave a Reply