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.
|
1 2 3 |
<script src="{{url('tinymce/jquery.tinymce.min.js')}}"></script> <script src="{{url('tinymce/tinymce.min.js')}}"></script> <script>tinymce.init({ selector:'#ckview' });</script> |
Now use the selector as and id in your textarea like below :-
|
1 |
<textarea name="editor" id="ckview" cols="30" rows="10">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis hic doloremque ex corporis provident recusandae. Molestias alias dignissimos molestiae minus quia consectetur sint, maxime quidem. Repellat temporibus similique iusto eaque.</textarea> |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
tinymce.init({ selector: "#ckview",theme: "modern",width: 680,height: 300, plugins: [ "advlist autolink link image lists charmap print preview hr anchor pagebreak", "searchreplace wordcount visualblocks visualchars insertdatetime media nonbreaking", "table contextmenu directionality emoticons paste textcolor responsivefilemanager code" ], toolbar1: "undo redo | bold italic underline | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | styleselect", toolbar2: "| responsivefilemanager | link unlink anchor | image media | forecolor backcolor | print preview code ", image_advtab: true , external_filemanager_path:"{{url('tinymce/filemanager')}}/", filemanager_title:"Responsive Filemanager" , external_plugins: { "filemanager" : "{{url('tinymce')}}/filemanager/plugin.min.js"} }); |
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
|
1 |
'upload_dir' => '/source/', |
And replace with this
|
1 |
'upload_dir' => getenv('APP_ROOT_PATH').'/public/tinymce/source/', |
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 :-
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Simple Tiny MCE With Resonsive FileManager Implementation</title> <link rel="stylesheet" href=""> <script src="{{url('tinymce/jquery.tinymce.min.js')}}"></script> <script src="{{url('tinymce/tinymce.min.js')}}"></script> </head> <body> <style> * { margin:10px auto; text-align: center; } </style> <div style="width: 800px;" class="center"> <form action=""> <textarea name="editor" id="ckview" cols="30" rows="10">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis hic doloremque ex corporis provident recusandae. Molestias alias dignissimos molestiae minus quia consectetur sint, maxime quidem. Repellat temporibus similique iusto eaque.</textarea> </form> </div> <script> tinymce.init({ selector: "#ckview",theme: "modern",width: 680,height: 300, plugins: [ "advlist autolink link image lists charmap print preview hr anchor pagebreak", "searchreplace wordcount visualblocks visualchars insertdatetime media nonbreaking", "table contextmenu directionality emoticons paste textcolor responsivefilemanager code" ], toolbar1: "undo redo | bold italic underline | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | styleselect", toolbar2: "| responsivefilemanager | link unlink anchor | image media | forecolor backcolor | print preview code ", image_advtab: true , external_filemanager_path:"{{url('tinymce/filemanager')}}/", filemanager_title:"Responsive Filemanager" , external_plugins: { "filemanager" : "{{url('tinymce')}}/filemanager/plugin.min.js"} }); </script> </body> </html> |
If you have any problem you can mention it via comments.
Leave a Reply