Cara Memasang Teks Editor dengan CKEditor

CKEditor adalah salah satu teks editor yang dibangun dengan JavaScript untuk membuat form posting/teks editor pada form.

Jadi dengan menggunakan teks editor ini kita dapat dengan mudah membuat posting form seperti pada wordpress.

Tentu sebagai developer web kita dimudahkan dengan menggunakan teks editor ini, ada banyak teks editor saat ini yang digunakan bukan berarti yang lain tidak bagus, akan tetapi disini saya hanya membahas hanya CKEditor.

What you see is what you get (WYSIWYG) adalah istilah yang digunakan menggambarkan teks editor, untuk mudahkan pemahaman tentu kita sudah familiar dengan MSword atau semacamnya jadi apa yang kita tulis di MS word hasilnya juga sama seperti tampilan di aplikasi tersebut, sehingga kita tidak perlu mengetahui kodenya untuk membuat teks tebal, miring, ukuran teks dansebagainya, nah teks editor ini sama fungsi seperti itu tetapi teks editor CKEditor digunakan pada website, sehingga memudahkan user didalam menulis tulisan

Ada beberapa paket CKEditor yang dapat digunakan sesuai kebutuhan, yakni paket :

  • Basic Paket, memiliki fitur yang sedikit dan ukuran file yang kecil.
  • Standart Paket, memiliki fitur sedang, dan ukuran filenya pun sedang.
  • Full Paket, memiliki fitur yang lengkap, dan ukuran filenya besar.

Kenapa saya pilih CKEditor ada beberapa kelebihan yakni yang pertama pastinya gratis, serta mudah digunakan.

Ok kita lanjutkan 🙂 kita dapat mendownload paket basic yang kita pelajari pada tutorial ini : download CKEditor .

Selanjutnya setelah selesai downloadekstrak file tadi kita lihat isi dari folder CKEditor sebagai berikut.

Kemudian kita buat form dengan nama file formberita.php untuk memasukan teks editor, masukan

kode berikut :

<html>
<head>
  <meta charset="utf-8">
  <title>Belajar Memasukan CKEditor | Ilmuweb.Net</title>	
  <script type="text/javascript" src="ckeditor/ckeditor.js"></script>
  
</head>
<body>
 		<h1>
    Cara Pasang CKEditor<br/> 			
    </h1>	
 		<input type="teks" name="judul" size="70"><br><br>
    <textarea class="ckeditor" id="ckeditor"></textarea>
    <br/>
    <button class="tombol">Simpan</button>
</body>
</html>

Penjelasan dari skrip di atas : tag javasript untuk memanggil CKEditor

<script type="text/javascript" src="ckeditor/ckeditor.js"></script>

Pada bagian textarea class ckeditor untuk memanggil form teks masukan ckeditor pada class dan id :

<textarea class="ckeditor" id="ckeditor"></textarea>

Setelah selesai maka kita coba buka file formberita.php yang telah kita buat, tampilanya ckeditor telah siap kita gunakan :

Setelah selesai kita coba untuk menuliskan sesuatu dalam teks editor.

Selanjutnya ada bebrapa teks editor yang bisa anda coba yakni : tinymce dan Rich text editor, tentunya memili setingan tersendiri didalam menggunakanya.

Pada tutorial berikutinya kita akan mencoba impelementasi teks editor ini dengan menggunakan PHP dan database MySQL di tunggu ya sahabat.

Sekian dulu tutorial cara pasang ckeditor semoga bermanfaat salam sukses penuh keberkahan. 🙂

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *