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 4Download 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.
Demo Link