Technology

CKEditor: Konten Editor yang User Friendly

 

Loading...

Ketika menggunakan form, kita mungkin biasa memakai textarea sederhana. Namun sebenarnya ada plugin yang lebih bagus untuk menggantikan penggunaan textarea sederhana. Namanya CKEditor. Mari langsung saja kita simak tutorial penggunaannya ;-)

1. Pertama download dulu installernya secara cuma-cuma di sini: http://ckeditor.com/download

2. Extract file yang sudah kita download dan langsung upload saja ke server. Kira – kira struktur file-nya jadi seperti ini:

3. Sedangkan untuk penggunaan CKEditor-nya, kita tinggal membuat sebuah file di root folder —misal kita beri nama index.php, dan kita masukkan script di bawah ini:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Copyright (c) 2003-2012, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Replace Textarea by Code &mdash; CKEditor Sample</title>
	<meta content="text/html; charset=utf-8" http-equiv="content-type" />
	<script type="text/javascript" src="ckeditor.js"></script>
	<script src="_samples/sample.js" type="text/javascript"></script>
	<link href="_samples/sample.css" rel="stylesheet" type="text/css" />
</head>
<body>
	<h1 class="samples">
		Tutorial &mdash; Penggunaan CKEditor
	</h1>

	<form action="sample_posteddata.php" method="post">
		<p>
			<textarea cols="80" id="editor1" name="editor1" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
			<script type="text/javascript">
			//<![CDATA[

				// This call can be placed at any point after the
				// <textarea>, or inside a <head><script> in a
				// window.onload event handler.

				// Replace the <textarea id="editor"> with an CKEditor
				// instance, using default configurations.
				CKEDITOR.replace( 'editor1' );

			//]]>
			</script>
		</p>
	</form>
</body>
</html>

4. Dari script di atas kita hanya perlu perhatikan cara load file:

	<script type="text/javascript" src="ckeditor.js"></script>
	<script src="_samples/sample.js" type="text/javascript"></script>
	<link href="_samples/sample.css" rel="stylesheet" type="text/css" />

Juga penulisan textarea CKEditor:

<textarea cols="80" id="editor1" name="editor1" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>

5. Jika sudah benar, maka saat dicek di browser hasilnya akan jauh lebih memuaskan dari textarea biasa.

Loading...

Berikan Komentar

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *