Mengintegrasikan CKeditor di Laravel

Membuat sebuah editor pada halaman website merupakan fitur yang menarik terlebih lagi untuk kebutuhan blogging, layaknya wordpress dengan editornya yang powerful dimana memudahkan penggunanya karena fiturnya yang lengkap. Sebenarnya kita bisa memanfaatkan library yang sudah ada yakni Ckeditor.

Ckeditor adalah text editor yang fleksibel yang dapat digunakan untuk menginput berupa teks yang secara otomatis akan diconvert menjadi HTML code, tidak hanya sebatas itu kita juga bisa menambahkan gambar dan video dengan fitur drag & drop kedalam editor tersebut. Tentu saja hal ini akan memudahkan pengguna bahkan pada tingkatan yang tidak memiliki pengetahuan seputar programming sekalipun.

Kabar baiknya, pada artikel kali ini, tidak hanya sekedar mengintegrasikan Ckeditor tapi kita juga akan menambahkan plugin codesnippet yang memungkinkan kita untuk memasukkan source code (syntax highlighting) kedalam editor tersebut tanpa di-convert sebagaimana mestinya, sehingga yang akan ditampilkan tetap berupa source code.

Baca Juga: Mengenal Application Performance Management & Jennifersoft

### Tahap Persiapan

Tahap awal, apa yang harus kita lakukan?

1. Download Ckeditor pada official website : https://ckeditor.com/ckeditor-4/download/
2. Mengintegrasikan Ckeditor kedalam Laravel 5.5
3. Install Codesnippet
4. Fixed Codesnippet

Langkah Instalasi

1. Extract file yang sudah kita download sebelumnya dan tempatkan kedalam folder public didalam directory project Laravel anda. Kemudian buat sebuat file blade pada folder resources/views dengan nama, misalnya: post-add.blade.php

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

2. ​Pada text area yang nantinya akan berubah menjadi Ckeditor interface, buat seperti ini:

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

Sampai pada tahap ini, Ckeditor telah berhasil kita install kedalam Laravel dan dapat digunakan sebagaimana mestinya.

Plugin Codesnippet

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

Sampai pada tahap ini Codesnippet sudah bisa digunakan, tapi bagi kamu yang ingin tampil beda pada snippet codenya dengan menggunakan theme misalnya, bisa menambahkan code berikut:

<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>

Lalu edit kembali file config.js, dan tambahkan code berikut:

config.codeSnippet_theme = 'monokai_sublime';

Note: ganti monokai_sublime dengan nama theme yang kamu inginkan. Adapun nama themenya bisa anda temui pada directory : ckeditor/plugins/codesnippet/lib/highlight/styles

Fixed Codesnippet

Saat mencoba mengedit code yang yang telah disimpan didatabase, maka apabila terdapat source code berbentuk HTML, secara otomatis akan di-load layaknya browser membaca code HTML. Misal: kamu memiliki code berupa form input, maka yang dihasilkan adalah sebuah kolom untuk meng-input. Hal ini tentu saja akan membuat kamu bekerja untuk kedua kalinya merapikan code tersebut agar nantinya yang ditampilkan tetap berupa source code. Maka untuk mengatasinya, silahkan gunakan:

htmlspecialchars

Saat membaca data kedalam text area yang akan me-load Ckeditor. Contoh:

htmlspecialchars($post->konten)