CKEditor in Laravel

By CodersDrive

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.

Step-1 Download CKEditor 4

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

ckeditor in laravel Step-2 Embed CKEditor in webpage

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

<div class="container text-center">
<h1 class="text-center">CKEditor4 demo in Laravel</h1>
<div id="editor">
    <p>Sample data for demo.</p>

<script src="js/ckeditor/ckeditor.js"></script>
    CKEDITOR.replace( 'editor' ,
          uiColor: '#9AB8F3'

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.

ckeditor in laravel

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

Demo Link

JQuery Laravel

Search blog..!

Connect with us