Cara Menggunakan CKeditor

CKeditor adalah plugin yang dibuat untuk membantu kalian dalam membuat suatu teks editor pada website kalian. CKeditor ini cukup populer dikalangan para developer web, karena penggunaanya terbilang cukup mudah. Dengan menggunakan CKeditor ini nantinya kalian dapat membuat suatu inputan teks yang dapat divariasikan langsung tanpa mengedit CSSnya. Lalu bagaimana cara menggunakan CKeditor ini ? Kalian bisa ikuti langkah-langkah berikut ini.CKeditor ini berbayar, namun ada juga versi gratisnya. Perbedaanya terletak dari support CKeditor dan juga ada beberapa tulisan atau elemen tidak bisa hilang karena kita menggunakan versi gratis. Lalu selanjutnya hal yang harus dipersiapkan adalah kalian tentu harus sudah paham tentang HTML, CSS, Javascript dasar. Setelah sudah sekarang waktunya kalian membuat tampilan website untuk form inputannya. Untuk mempersingkat waktu kalian bisa salin contoh code berikut ini.

Editor.html

<html>
<head>
	<meta charset="UTF-8">
	<title> Test Editor </title>
</head>
<body>
	<div style="width: 1000px;margin:auto;">
		<textarea name="ckeditor" id="" cols="30" rows="10"></textarea>
	</div>			
</body>
</html>

Setelah sudah kalian simpan file tersebut dengan format dan  nama sesuai dengan judulnya. Jika sudah kalian bisa buka file tersebut pada browser kalian untuk melihat hasilnya. Dan hasilnya akan muncul seperti ini.

cara-menggunakan-ckeditor-rangga1-161017

Tampilannya masih sangat sederhana. Sekarang kalian bisa tambahkan class pada text area dengan nama ckeditor. Kemudian dibawah dari div tersebut kalian tambahkan script berikut ini.

<script src=”https://cdn.ckeditor.com/4.7.3/standard/ckeditor.js”></script>

Simpan kembali file tersebut dan reload browser kalian. Maka tampilanya berubah menjadi seperti ini.

cara-menggunakan-ckeditor-rangga2-161017

Sudah terlihat perubahanya, textarea yang kita buat tadi berubah menjadi text editor lengkap dengan beberapa fiturnya. Itu dikarenakan kita telah menghubungkan file html kita dengan script CKeditor. Link tersebut berisikan perintah CKeditor sehingga textareanya berubah. Tentu saja kalian bisa mendownload script tersebut apabila ingin aktif walau tanpa koneksi internet. Caranya cukup mudah, kalian bisa langsung ke websitenya di https://ckeditor.com/ckeditor-4/download/ . Kalian bisa download sesuai dengan fitur apa yang kalian inginkan, tentu tersedia juga versi berbayarnya. Mudah bukan?

Sekian pembahasan mengenai bagaimana cara menggunakan CKeditor. Semoga bermanfaat.

 

 

DUMET School Author

DUMET School adalah tempat kursus website, kursus desain grafis, kursus digital marketing, kursus video editing dan kursus mobile apps terbaik di Jakarta dan Depok.

Leave a Reply

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