Lebih terarah belajar coding melalui Kelas Online dan Interactive Coding Lihat Materi Belajar

Mengintegrasikan CKeditor di Laravel

Ditulis oleh Anugrah Sandi, dipublikasi pada 28 Nov 2017 dalam kategori Tutorial
Mengintegrasikan CKeditor di Laravel - CodePolitan.com

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


Bagi kamu yang ingin menggunkan Codesnippet yang berfungsi untuk membuat syntax highligting pada source yang di-input, maka silahkan download plugin Ckeditor berikut : Codesnippet Plugin . Lalu tempatkan kedalam directory Ckeditor >> plugins. Kemudian edit file config.js

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)

background

Gabung CodePolitan Membership

Ingin belajar coding secara online dengan lebih terarah? Gabung sekarang dalam program Premium Membership di CodePolitan. Dapatkan ratusan modul belajar pemrograman premium dalam beragam format dengan materi silabus lengkap dan tersusun rapi dari awal hingga mahir.

LIHAT MATERI BELAJAR GABUNG MEMBERSHIP