How to Install Ckeditor on Laravel

How to Install Ckeditor on Laravel

Today, in this laravel ckeditor tutorial we are going to see how to integrate ckeditor in laravel 5 which is now version 5.5 (released yesterday) in its most recent update.

Also I suggest to read:
  1. Upgrade laravel from 5.4.x to 5.5.x
  2. Installing laravel 5.5

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 ?

  1. Download fresh copy of ckeditor from their official website here.
  2. Integrate that package into laravel 5.5.

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 create.blade.php. Initialize the CK-Editor in your blade template by looking at the code below.

<script src="{{asset('assets/ckeditor/ckeditor.js')}}">script>
<script>
   var ckview = document.getElementById("ckview");
   CKEDITOR.replace(ckview,{
   language:'en-gb'
 });
script>
Markup

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.

<textarea id="ckview" class="form-control mb-20 editor" name="description" rows="10" cols="50">textarea>
Markup

Thats it, now you would have your textarea with ckeditor.

Still in problem ?? Let us know so that we can sort them out together through comments.

- Last updated 1 year ago

Be the first to leave a comment.

You must login to leave a comment