Integrasi CKEditor dengan PHP dan MySQL

CKEditor adalah editor HTML WYSIWYG. CKEditor dapat membuat teks HTML lebih ramah pengguna dengan menyediakan berbagai fitur seperti – menambahkan gambar, menulis kode HTML, memformat teks, dll. Ini juga dapat ditambahkan ke dalam container HTML.

CKEditor tidak bergantung pada perpustakaan lain seperti jQuery dan dapat digunakan dalam 3 mode berbeda antara lain Editor Artikel, Editor Dokumen, dan Editor Inline. Opsi berbeda tersedia untuk menyesuaikan editor.

Dalam tutorial ini, saya akan menambahkan Article dan Inline mode CKEditor pada halaman yang sama dan menyimpannya ke database MySQL saat submit dengan PHP.

Membuat Database

Untuk langkah yang pertama yaitu membuat database. Disini saya akan menggunakan tutorial sebagai nama database. Setelah itu, di dalam tutorial database jalankan query berikut untuk membuat table contents.

CREATE TABLE `contents` (
  `id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
  `title` varchar(255) NOT NULL,
  `short_desc` text NOT NULL,
  `long_desc` text NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

Configuration

Langkah selanjutnya yaitu kita perlu membuat file config.php yang digunakan sebagai koneksi ke dalam database. Copy/paste code dibawah ini ke dalam file config yang barusan Anda buat.

<?php

$host = "localhost"; /* Host name */
$user = "root"; /* User */
$password = ""; /* Password */
$dbname = "tutorial"; /* Database name */

$con = mysqli_connect($host, $user, $password,$dbname);
// Check connection
if (!$con) {
  die("Connection failed: " . mysqli_connect_error());
}

Install CKEditor

Ada beberapa cara untuk menginstall CKEditor ke dalam project kita. Salah satunya yaitu mendownload file CKEditor, lalu extract ke dalam project kita. Anda bisa mendownload CKEditor disini.

Sertakan pustaka ckeditor.js di <head> atau di akhir bagian <body>.

<script src="ckeditor/ckeditor.js" ></script>

Atau Anda juga bisa langsung menggunakan CDN dengan menaruh di <head> atau di akhir bagian <body>.

<script src="//cdn.ckeditor.com/4.11.1/standard/ckeditor.js"></script>

HTML & PHP

HTML –

Buat sebuah <form>. Di dalam <form> tambahkan kotak teks, dua elemen <textarea>, dan tombol kirim. Inisialisasi CKEditor di <textarea> menggunakan JavaScript.

PHP –

Pada <form> kirim baca nilai POST dan siapkan kueri untuk INSERT catatan di tabel konten.

Full Code.

<?php 
include "config.php";

// Insert record
if(isset($_POST['submit'])){

  $title = $_POST['title'];
  $short_desc = $_POST['short_desc'];
  $long_desc = $_POST['long_desc'];

  if($title != ''){

    mysqli_query($con, "INSERT INTO contents(title,short_desc,long_desc) VALUES('".$title."','".$short_desc."','".$long_desc."') ");
    header('location: index.php');
  }
}

?>

<!DOCTYPE html>
<html>
  <head>
    <title>Integrate CKeditor to HTML page and save to MySQL with PHP</title>

    <!-- CSS -->
    <style type="text/css">
    .cke_textarea_inline{
       border: 1px solid black;
    }
    </style>

    <!-- CKEditor --> 
    <script src="ckeditor/ckeditor.js" ></script>
  </head>
  <body>

    <form method='post' action=''>
       Title : 
       <input type="text" name="title" ><br>

       Short Description: 
       <textarea id='short_desc' name='short_desc' style='border: 1px solid black;' >       </textarea><br>

       Long Description: 
       <textarea id='long_desc' name='long_desc' ></textarea><br>

       <input type="submit" name="submit" value="Submit">
    </form>

  </body>
</html>

JavaScript

Inisialisasi CKEditor pada elemen <textarea>. Di <textarea> pertama tentukan editor tipe inline. Toolbar akan ditampilkan saat mengetik.

CKEDITOR.inline([element-id]);

Di <textarea> kedua tentukan CKEditor dengan konfigurasi default. Sebagai contoh, saya telah menambahkan opsi lebar dan tinggi yang dapat Anda hapus jika tidak diinginkan.

CKEDITOR.replace([element-id],{ options [optional] });

Penutup

Selamat Anda sekarang telah berhasil mengintegrasi CKEditor dengan PHP dan MySQL. Selain itu, Anda juga bisa sertakan pustaka CKEditor pada halaman dan inisialisasi pada textarea atau container HTML menggunakan CKEDITOR.replace([element-id]). Anda juga bisa menggunakan class=’ckeditor’ untuk menginisialisasinya pada sebuah elemen. Dalam hal ini, Anda tidak perlu menulis kode JavaScript.