Today, in this laravel ckeditor tutorial we are going to see how to integrate ckeditor in laravel 5 which is now version 5.4 in its most recent update.
If you take a look at CK-Editor it is the most flexible text editor that we can use across our websites description section to embed custom HTML codes, add images & videos directly using drag and drop features that we can get from any other WYSIWYG Editor out there.
It makes easy for us to add images and videos without having to have good knowledge in programming and its also easy for clients to handle their content is very flexible manner.
Lets get started :-
What we are going to do ?
- Download fresh copy of ckeditor from their official website here.
- Integrate that package into laravel 5.4.
Step – 1
Extract ckeditor zip package inside public folder inside laravel project folder. Once you have extracted all the files, open up your blade where you want to display the editor.
In my case it would be index.blade.php. Initialize the CK-Editor in your blade template by looking at the code below.
|
1 2 3 4 5 6 7 |
<script src="{{url('ckeditor/ckeditor.js')}}"></script> <script> var ckview = document.getElementById("ckview"); CKEDITOR.replace(ckview,{ language:'en-gb' }); </script> |
Once it have been added, Inside your textarea you need to specify the id of the textarea where you want your editor to be displayed. In my case i have given ckview to display editor.
Step 2 :-
Add an id to your textarea like below to display the editor in your textarea which would be now replaced with ckeditor.
|
1 |
<textarea name="editor" id="ckview" cols="30" rows="10">soemthing</textarea> |
Thats it, now you would have your textarea with ckeditor.
Still confused ?? Why dont you have full code so that you can understand whats happening.
|
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 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Simple CK Editor CSS Implementation</title> <link rel="stylesheet" href=""> <script src="{{url('js/jquery.min.js')}}"></script> <script src="{{url('ckeditor/ckeditor.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">Your Text from Editor</textarea> </form> </div> <script> var ckview = document.getElementById("ckview"); CKEDITOR.replace(ckview,{ language:'en-gb' }); </script> </body> </html> |
Still in problem ?? Let us know so that we can sort them out together through comments.
Leave a Reply