Bissmillahirohmanirrahim
– Pada kesempatan kali ini saya akan membuat tutorial bagaimana membuat
tampilan textarea menjadi lebih menarik dan nyaman untuk digunakan. Perlu
diketahui sebelumnya bahwa plugin CKEditor ini merupakan sebuah fitur WYSIWYG.
Apa Itu WYSIWYG
WYSIWYG merupakan
kependekan dari “What You See Its What You Get”, ya kalau diterjemahkan kedalam
Bahasa Indonesia kurang lebih “ Apa yang kamu lihat adalah apa yang akan kamu
dapat kan “ dan memang fiturnya seperti itu ketika kalian menuliskan sesuatu di
dalam CKEditor tersebeut maka ketika akan diposting akan sama persis seperti
apa yang telah kalian ketik.
Langsung saja ikuti tutorialnya :
Sebelumnya jika kalian belum memiliki plugin CKEditor silahkan kunjungi
: ckeditor.com/downloads Pilih yang full package.
1. Extract hasil download CKEditor sampai nanti menghasilkan folder dengan
nama ckeditor.
2. Jika sudah maka buatlah sebuah foder latihan baru dan masukan folder ckeditornya.
3. Selanjutnya buat file
htmlnya atau kalian mungkin sudah memiliki file php tidak masalah.
4. Setelah itu buat kode
html dan panggil terlebih dahulu file js nya :
5. Pastikan file js nya benar benar terpanggil
6. Kemudian kalian buat sebuah form sederhana
7. Sampai disini ckeditor kalian masih belum jalan kita tinggal
menambahkan script di atas :
8. Sampai disini kalian dapat membuka dokumen html kalian
dengan web browser, jika kalian berhasil maka akan tampil seperti berikut :
Bagaimana
apakah kalian juga berhasil ? CKEditor ini sangat membantu sekali dalam
membangun sebuah website yang didalamnya mengharuskan menginput sebuah
postingan seperti untuk sebuah berita, blog, dll yang mengharuskan kalian
membuat postingan kalian secara rapi dan enak untuk dilihat maupun dibaca oleh
orang lain.
<!DOCTYPE html>
<html>
<head>
<title>Latihan CKEditor</title>
</head>
<body>
<form>
<p>Isi Postingan :</p>
<p><textarea name="berita" class="texteditor"></textarea></p>
<p><button type="submit">Simpan Postingan</button></p>
</form>
<script type="text/javascript" src="ckeditor/jquery-3.3.1.js"></script>
<!-- panggil ckeditor.js -->
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
<!-- panggil adapter jquery ckeditor -->
<script type="text/javascript" src="ckeditor/adapters/jquery.js"></script>
<!-- setup selector -->
<script type="text/javascript">
$('textarea.texteditor').ckeditor();
</script>
</body>
</html>
Cara Membuat Textarea HTML Menarik Dengan CKEditor
Reviewed by kilhem
on
7/18/2018 09:22:00 pm
Rating:
Reviewed by kilhem
on
7/18/2018 09:22:00 pm
Rating:
No comments:
Jangan malu untuk berkomentar