CKEditor in Laravel

CKEditor is a very popular Javascript rich text editor, which enables webpage content editing directly inside a webpage. We will see how to start using it in Laravel application.

Download the "zip" file from https://ckeditor.com/ckeditor-4/download/. Select Standard Package to download as shown below. Extract the downloaded "zip" file to your project location at public/js/ckeditor/

Create a file ckeditor-demo.blade.php at resources/views/ and add the following code to it.

@extends('layouts.app')
@section('content')
<div class="container text-center">
<h1 class="text-center">CKEditor4 demo in Laravel</h1>
<div id="editor">
    <p>Sample data for demo.</p>
</div>

<script src="js/ckeditor/ckeditor.js"></script>
<script>
    CKEDITOR.replace( 'editor' ,
         {
          uiColor: '#9AB8F3'
          });
</script> 
</div>
@endsection

In the above code the function CKEDITOR.replace( 'editor' ) will do the magic. CKEditor will be loaded on your webpage at HTML element with id="editor". In our case it's a <div> element. Additionally you can see another argument uiColor: '#9AB8F3' which is the background color of the CKEditor UI.

Thanks for reading this post. Have a look at the demo of this code below.