Cara membuat input WYSIWYG dengan CKeditor

Cara membuat input WYSIWYG dengan CKeditor

2141
2
SHARE

Halo kawan, jumpa lagi.. beberapa waktu yang lalu ada temen bertanya bagaimana caranya membuat inputan dimana kita bisa mengatur text dengan lebih nyaman, kita bisa mengatur rata text, ukuran font, memasukkan gambar dll.

Inputan tersebut umum disebut dengan What You See Is What You Get (WYSIWYG). Pada umumnya inputan seperti itu digunakan untuk menginput data berita dalam blog atau forum.

Cara membuat input WYSIWYG sangatlah mudah, karena saat ini telah banyak tersedia library untuk membangun WYSIWYG. Yang paling populer diantaranya ada tinymce dan ckeditor.

Pada kesempatan kali ini saya akan mencoba membuat dengan menggunakan ckeditor. Baiklah agar tidak penasaran langsung saja kita coba membuatnya.

Step 1 : Silahkan anda download CKEditor di website nya atau anda bisa mendonwloadnya pada link di akhir artikel ini. Anda juga perlu mendownload jquery di sini atau pada link di akhir artikel ini.

Step 2 : Buatlah folder wysiwyg dalam C:\xampp\htdocs. Letakkan hasil extrak ckeditor dan jquery ke dalam folder wysiwyg tersebut.

Step 3 : Buatlah file index.php di dalamnya dengan kode sebagai berikut :

Perhatikan pada file index.php di atas,
– Baris 3 : kita membuat input berupa textarea dengan id=’ckeditor1′
– Baris 13 : kita panggil fungsi ckeditor menggunakan javascript. Fungsi ini akan mengubah tampilan textarea dengan id=’ckeditor1′ menjadi inputan wysiwyg.

Step 4 : Cobalah untuk membuka file index.php melalui browser maka akan muncul inputan wysiwyg seperti gambar di awal artikel ini.

Selesai

Mudah bukan. Untuk lebih lanjut anda bisa melakukan pengaturan lainnya sesuai dengan dokumentasi yang ada pada CKeditor. Namun Jika anda sudah puas dengan tampilan yang ada, anda tidak perlu melakukan apa-apa lagi.

Pada kesempatan berikutnya kita akan menambahkan file manager (di sini). File manager merupakan bagian yang sangat penting dari wysiwyg, karena dengan file manager kita bisa mengupload file secara langsung pada menu wysiwyg. Jadi ikuti terus artikel ini ya.

Terima kasih telah berkunjung ke harviacode.com. Jangan lupa dishare, dicomment dan dilike ya. heee…

Bagikan artikel ini ya.. terima kasih

2 COMMENTS

  1. gan kalo udah disimpen di database, trus kita mau nampilin hasil simpenan yang tadi gimana?
    nya aneh kebawa ama tag tagnya bukan malah tag nya diterjemahin ama browser

LEAVE A REPLY