Cara Implementasi CKEditor4 pada tag HTML Textarea

CKEditor adalah salah satu editor WYSIWYG (What You See Is What You Get) yang dapat dipasang pada kode HTML. Dengan CKEditor, kita dapat dengan mudah untuk membuat file pada website layaknya menggunakan software office pada PC.

Lalu, bagaimana cara inisialisasi CKEditor pada kode HTML kita?

Oke, langsung aja, yang pertama harus dilakukan adalah load script package CKEditor di projek HTML kita. Biasanya script ini di load pada tag header. Ada beberapa cara untuk dapat load package CKEditor. Kita bisa download package nya terlebih dahulu trus copy package tersebut ke folder assets pada projek kita, install lewat NPM, atau yang paling simple adalah dengan cara load package CKEditor menggunakan link CDN-nya. Tetapi, cara ini membutuhkan koneksi internet ketika kita jalankan di lokal PC kita.

Pada artikel ini, kita akan coba load package CKEditor menggunakan link CDN terlebih dahulu. Copy tag script dibawah ini pada kode HTML

<script src="https://cdn.ckeditor.com/4.20.1/standard/ckeditor.js"></script>

CKEditor sendiri membagi preset tombol editor ke dalam 5 tipe, yaitu :

basic
standard
standard-all
full
full-all

Pada potongan script diatas, adalah preset tombol editor tipe standard. Jika kita menginginkan preset tombol yang lebih lengkap, kita bisa menggunakan preset tombol tipe lain, seperti menggunakan tipe full atau full-all. Caranya adalah dengan cara ganti kata standard pada link diatas dengan tipe preset yang lain. Contoh jika kita ingin menggunakan preset full, maka script-nya menjadi

<script src="https://cdn.ckeditor.com/4.20.1/full/ckeditor.js"></script>

Kemudian, untuk inisialisasi atau pasang CKEditor pada tag textarea kita, kode simplenya adalah sebagai berikut

<!DOCTYPE html>
<html>
<head>
    <title>Tutorial Pakai CKEditor 4</title>
    <!-- load script package CKEditor 4 -->
    <script src="https://cdn.ckeditor.com/4.20.1/standard/ckeditor.js"></script>
</head>
<body>

</body>
</html>
<form>
    <div class="form-group form-check">
        <!-- textarea yang mau dipasang editor, diberi attribute name="editor1" -->
        <textarea name="editor1"></textarea>
        <label class="form-check-label" for="exampleCheck1">Content</label>
    </div>
    <!-- script dasar untuk inisialisasi ckeditor4 -->
    <script>
        // editor1 adalah value attribute name dari textarea yang mau dipasangkan ckeditor4
        CKEDITOR.replace( 'editor1' );
    </script>
</form>

yang perlu diperhatikan pada kode tersebut adalah value daripada attribute name pada tag textarea. Value tersebutlah yang akan digunakan untuk inisialisasi CKEditor. Untuk value attribute name ini, bebas ya..tidak harus 'editor1'. Bisa disesuaikan dengan kebutuhan kita.

Berikut adalah hasil implementasi CKEditor-nya dengan preset tombol standard

Hasil implementasi CKEditor