Tutorial PHP - Membuat Text Editor dengan Menggunakan CKEditor 5

Di dalam artikel kali ini saya akan menjelaskan bagaimana caranya membuat sebuah text editor dengan menggunakan PHP native tanpa framework. Saya sengaja menggunakan PHP native sebagai contoh karena jika anda sudah bisa memahami bagaimana menerapkan cara tersebut dengan PHP native, tentu saja anda akan bisa juga menerapkannya dalam berbagai framework PHP lainnya, Di sini saya menggunakan CKEditor versi 5 yang merupakan versi terbaru saat artikel ini ditulis.

#INSTALASI

Intalasi dari CKEditor 5 ini bisa menggunakan CDN maupun mendownload source nya terlebih dahulu. Jika anda menggunakan CDN yang sudah disediakan anda cukup menggunakan kode di bawah ini

<script src="https://cdn.ckeditor.com/ckeditor5/11.1.1/classic/ckeditor.js"></script>

Namun jika anda ingin mendownload source nya terlebih dahulu, dapat anda download pada link berikut ini https://ckeditor.com/ckeditor-5/download/. File yang diperlukan adalah ckeditor.js dan kode yang digunakan menjadi seperti berikut ini

<script src="[ckeditor-build-path]/ckeditor.js"></script>

Untuk cara yang kedua ini, anda hanya perlu melakukan include file js yang anda download sesuai dengan path dari file ckeditor.js di mana anda meletakkan file tersebut.

#CARA PENGGUNAAN

Sesuai dengan dokumentasi resminya, CKEditor versi 5 ini dapat digunakan dengan  4 mode yang berbeda. Mode tersebut adalah

• Classic Editor 
• Inline Editor
• Ballon Editor
• Document Editor

Dalam artikel ini saya hanya akan menjelaskan penggunaan dari Classic Editor saja. Classic Editor ini mempunyai bentuk yang mirip dengan CKeditor versi 4 sebelumnya di mana mempunyai tampilan kotak biasa dengan toolbar di bagian atasnya. Untuk mode-mode penggunaan yang lainnya mungkin akan saya jelaskan pada artikel-artikel selanjutnya karena untuk saat ini saya sendiri belum mempelajarinya :). 

Cara penggunaan dari CKEditor 5 ini masih mirip dengan CKEditor 4, yang pertama adalah menyediakan textarea terlebih dahulu seperti kode di bawah ini.

<textarea id="editor" name="content"></textarea>

Kemudian langkah selanjutnya adalah menambahkan script untuk mengubah textarea tersebut menjadi sebuah text editor. Caranya adalah dengan menambahkan kode di bawah ini

    <script>

        ClassicEditor

            .create( document.querySelector( '#editor' ) )

            .catch( error => {

                console.error( error );

            } );

    </script>

Cara di atas akan menghasilkan text editor dengan toolbar secara default. Pembahasan lebih lanjut mengenai toolbar dan kustomisasinya akan saya jelaskan pada artikel-artikel selanjutnya. Yang perlu anda perhatikan pada contoh kode di atas adalah id pada textarea harus sama dengan yang digunakan pada script. Selain menggunakan id, anda juga bisa menggunakan class seperti pemakaian pada jQuery umumnya. 

Untuk menyimpan data dari editor tersebut caranya sama saja dengan form input biasanya. Anda hanya perlu menambahkan form dengan method POST (atau GET terserah anda) dan kemudian mendapatkan isinya dengan menggunakan perintah $_POST['content'] (atau $_GET tergantung method form yang anda gunakan).

Demikian penjelasan saya mengenaik CKEditor 5 ini. Untuk kustomisasi lebih lanjut akan saya pelajari terlebih dahulu caranya dan akan saya buatkan artikel nya jika saya sudah berhasil memahaminya :). Dikarenakan waktu yang saya punya sudah tidak sebanyak di saat saya memulai blog ini jadi saya mohon maaf terlebih dahulu jika frekuensi artikel pada blog ini menurun :). Semoga penjelasan sederhana tentang penggunaan CKEditor 5 ini dapat dipahami dan bermanfaat. Selamat mencoba.