Tutorial Cara Memasang Teks Editor WYSIWYG pada Website

Tutorial Cara Mudah Memasang Teks Editor WYSIWYG pada Website


Tutorial Cara Mudah Memasang Teks Editor WYSIWYG pada Website – Pada tulisan kali ini akan saya tunjukkan bagaimana cara memasang dan mengintegrasikan sebuah teks editor WYSIWYG (What You See Is What You Get) pada website, yaitu sebuah editor yang akan memudahkan kita dalam melakukan pemformatan teks pada website layaknya teks editor classic milik WordPress, sehingga dengan teks editor ini kita bisa membuat eteks format tebal, miring, menyisipkan tabel, gambar dan lainnya dengan mudah.

Memilih Teks Editor

Terdapat banyak sekali teks editor WYSIWYG diluar sana yang telah tersedia, mulai dari yang gratis hingga yang berbayar. Mulai dari yang sederhana sampai yang memiliki fitur yang sangat lengkap, antara lain CKEditor, KCFinder, Summernote, TinyMCE, Quill, dll. Namun pada tulisan ini akan saya tunjukkan bagaimana memasang teks editor CKEditor versi 4 (Standard Package) pada website.

Oh ya, sekedar informasi bahwa sampai tulisan ini dibuat sebenarnya CKEditor sudah rilis hingga versi 5, hanya saja disini saya gunakan versi 4 karena masih mendukung browser jadul dan lebih mudah dalam hal konfigurasinya. Juga versi 4 ini terdiri dari beberapa paket sehingga teman-teman bebas mau gunakan paket yang mana. Untuk mendownloadnya, teman-teman bisa kunjungi link https://ckeditor.com/ckeditor-4/download/

Pemilihan paket teks editor CKEditor versi 4

Membuat Projek di Localhost

Output yang ingin ditampilkan pada artikel ini nantinya akan terlihat seperti pada gambar berikut. Bagaimana, keren kan?

Teks Editor WYSIWYG CKEditor versi 4 (Standard Package)

Oke, untuk mulai memasang teks editor WYSIWYG pada website, teman-teman buat folder dulu di dalam htdocs (jika menggunakan XAMPP), teman-teman bisa namai foldernya dengan nama websiteku. Lalu copykan folder ckeditor yang tadi sudah didownload.

Terakhir buatlah satu buah file bernama index.php dan letakkan di dalam folder websiteku lalu ketikkan baris berikut:

<!DOCTYPE html>
<html>
<head>
	<title>Kangriyanto.Net | Memasang Teks Editor WYSIWYG pada Website</title>
	<style type="text/css">
		div { padding: 5px; width: 800px; }
		textarea { padding: 5px; }
	</style>
</head>
<body>

<form method="post" action="#">
	<div>
		<textarea name="isi" id="editor"></textarea>
	</div>
	<div>
		<input type="submit" name="submit" value="Submit">
	</div>
</form>

<div>
	<?php 
	// digunakan untuk menampilkan hasil
	if (isset($_POST['submit'])) {
		echo $_POST['isi'];
	}
	?>
</div>

<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
<script type="text/javascript">
	CKEDITOR.replace('editor');
</script>
</body>
</html>

Yang perlu diperhatikan ialah bagian id dari textarea yang digunakan harus sama dengan isi dari CKEditor.replace().

Simpan file tersebut lalu buka browser dan ketikkan alamat localhost/websiteku maka seharusnya akan muncul halaman sesuai ekspektasi kita di awal. Ketikkan beberapa paragraf dengan berbagai format, lalu klik tombol Submit, maka seharusnya akan memberikan hasil yang sama.

Uji Coba Menjalankan CKEditor pada Browser di Komputer Lokal (localhost)

Nah, itulah tadi tutorial cara memasang teks editor WYSIWYG CKEditor pada Website. Semoga bermanfaat buat teman-teman semua 🙂

Tinggalkan Komentar

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.