How To Integrate CKeditor in Laravel Framework Based Web Application

IMAGE SOURCE

What Will I Learn?

in this tutorial we will learn how to Integrate Ckeditor, Ckeditor is a flexible text editor that can be used to input text that will automatically be converted into HTML code, not only limited to that we can also add images and video with drag & drop feature into the editor. but we will also add the codesnippet plugin which allows us to insert the source code (syntax highlighting) into the editor without being converted properly, so that it will be displayed as a source code.

Requirements

• Installed Xampp Or Mampp for Web Server
• Basic Knowledge About PHP and PHP OOP Concept
• Basic Knowledge About HTML and CSS
• Downloaded Ckeditor You Can Download in this following LINK

Difficulty

• Basic

Tutorial Contents

To start creating web apps with Laravel, you need a web server and database engine. Please use Apache2 and MySQL for this Laravel. Then the minimum required PHP is the 5.6 version for compatibility with the various packages that Laravel has provided.

Download the Composer first from the link https://getcomposer.org/composer.phar. Then put it in a directory that you can memorize easily. Eg save in / opt / phar. Then please go to the / var / www / html directory or any other directory that will be used to save the Laravel project.

For example now we save this Laravel project in / var / www / html.

$ cd /var/www/html
$ php /opt/phar/composer.phar create-project --prefer-dist laravel/laravel laraweb

The default Laravel page can be accessed by accessing the URL

http: //localhost /laraweb /public/  

Integrate CKeditor

Extract the CKeditor file that we have downloaded earlier and place it into the public folder in your Laravel project directory. Then create a blade file in the resources / views folder with the name, for example: post-add.blade.php

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

In the text area that we will change to Ckeditor interface, create something like this following blockcode:

<textarea id="content" class="form-control" name="konten" rows="10" cols="50"></textarea>

Up to this point, Ckeditor has been successfully installed into Laravel and can be used properly.

Codesnippet Plugin

Now it's time we implemented one of the Codesnippet plugins that works to create syntax highligting on input source, then please download the following Ckeditor plugin: Codesnippet Plugin. Then place it into the **Ckeditor directory >> plugins **. Then edit the config.js file

CKEDITOR.editorConfig = function( config ) {
    // Define changes to default configuration here. For example:
    // config.language = 'fr';
    // config.uiColor = '#AADC6E';
    config.extraPlugins = "lineutils,widget,codesnippet";
};

Up to this point Codesnippet is usable, but for those of you who want to be different on the snippet codenya by using the theme for example, can add the following code:

<link href="{{ asset('ckeditor/plugins/codesnippet/lib/highlight/styles/default.css') }}" rel="stylesheet">
<script src="{{ asset('ckeditor/plugins/codesnippet/lib/highlight/highlight.pack.js') }}"></script>
<script>hljs.initHighlightingOnLoad();</script>

Then edit the config.js file again, and add the following code:

config.codeSnippet_theme = 'YOUR_SELECTED_THEME';

change YOUR_SELECTED_THEME with the name of the theme you want. The theme names can be found in the directory: ckeditor / plugins / codesnippet / lib / highlight / styles

Fixed Codesnippet

When trying to edit the code that has been stored in the database, then if there is HTML-shaped source code, it will automatically be loaded like a browser reading HTML code. For example: you have the code in the form of input, then the result is a column to input. This will of course make you work for the second time to tidy up the code so that it will be displayed in the form of source code. So to fix this, please use:

htmlspecialchars

When reading data into text area that will load Ckeditor. Then use the following code:

htmlspecialchars($post->your_data)

That's what I can share on how to implement this tutorial ckeditor this time. If you have any questions, please ask the question in the comment field below.

---

Posted on Utopian.io - Rewarding Open Source Contributors

---