Kams Editor adalah sebuah editor HTML WYSIWYG berbasis web dengan JavaScript yang dibuat oleh Kamshory Developer. Kams Editor lahir dari sebuah kebutuhan akan editor HTML WYSIWYG yang dapat diakses dengan cepat meskipun pada jaringan internet yang sangat lambat. Kams Editor dapat mengubah field TEXTAREA atau element lain menjadi sebuah editor. Pengguna dapat memformat teks, membuat daftar, membuat tabel, menyisipkan gambar, menyisipkan lambang, menyisipkan tautan, dan sebagainya. Kams Editor akan secara otomatis membuat kode HTML sesuai dengan apa yang dimasukkan oleh pengguna. Pengguna tetap dapat melihat dan mengubah kode HTML jika diperlukan. Editor dapat memperbaiki kesalahan kecil pada penulisan atribut dari setiap tag yang dimasukkan.

Kams Editor sangat mudah digunakan dan diintegrasikan dengan sistem lain. Pada TEXTAREA dan INPUT TEXT, apabila fitur JavaScript pada browser tidak diaktifkan, maka pengguna tetap dapat menggunakan TEXTAREA dan INPUT TEXT sebagaimana biasa tanpa harus kehilangan fungsinya.

Kams Editor sangat sederhana dan mempunyai ukuran yang sangat kecil dibandingkan dengan editor HTML WYSIWYG lainnya. Kams Editor menyediakan berbagai macam fungsi standard HTML yang dapat digunakan dengan cara memilih icon pada toolbar. Fungsi-fungsi tersebut dapat dipilih sendiri oleh pengembang pada saat Kams Editor digunakan. Kams Editor dapat digunakan pada web yang menggunakan script PHP, JAVA maupun ASP pada sisi server. Kams Editor mempunyai konfigurasi yang sangat mudah.

Kams Editor cocok untuk berbagai browser smart phone dan tablet PC. Ukurannya yang sangat kecil membuat Kams Editor dapat dimuat dengan cepat.

Kompatibilitas

Kams Editor berjalan baik pada browser Mozilla Firefox dan Flock. Kams Editor juga bisa berjalan pada beberapa browser lain yaitu:

  1. Internet Explorer 6, Internet Explorer 7, Internet Explorer 8 dan Internet Explorer 9
  2. Google Chrome
  3. Netscape Navigator
  4. Safari
  5. Opera

Fungsi pada Kams Editor

Kams Editor menyediakan berbagai fungsi yaitu sebagai berikut:

  1. Bold
    Membuat teks tebal
  2. Italic
    Membuat teks miring
  3. Underline
    Membuat teks bergaris bawah
  4. Striketrough
    Membuat teks tercoret
  5. Format
    Memilih format seperti paragraf, heading, preformated (monospace) dan address
  6. Font Family
    Memilih alternatif font
  7. Font Size
    Memilih ukuran font
  8. Subscript
    Membuat subscript
  9. Superscript
    Membuat pangkat
  10. Font Color
    Meberi warna teks
  11. Background Color
    Memberi warna latar
  12. Remove Format
    Membuang format
  13. Left Alignment
    Membuat paragraf rata kiri
  14. Center Alignment
    Membuat paragraf di tengah
  15. Right Alignment
    Membuat paragraf rata kanan
  16. Justify Alignment
    Membuat paragraf rata kiri-kanan
  17. Numbering (Ordered List)
    Membuat daftar bernomor
  18. Bullet (Unordered List)
    Membuat daftar tak bernomor
  19. Increase Indent
    Menggeser ke kanan
  20. Decrese Indent (Outdent)
    Menggeser ke kiri
  21. Blockquote
    Membuat kutipan
  22. Undo
    Membatalkan tindakan sebelumnya
  23. Redo
    Kembali setelah pembatalan
  24. Insert Image
    Menyisipkan gambar
  25. Insert Table
    Menyisipkan tabel
  26. Insert Symbol
    Menyisipkan lambang
  27. Insert Quran
    Memasukkan ayat Al Quran
  28. Insert Link
    Membuat link dari sebuah objek (teks atau gambar)
  29. Remove Link
    Membuang link dari sebuah objek (teks atau gambar)
  30. Insert Horizontal Rule
    Membuat garis mendatar
  31. Insert Nonbreaking Space
    Menyisipkan spasi nonbreaking ( )
  32. HTML Entity Editor
    Mengubah kode HTML
  33. Preview
    Melihat tampilan (tanpa menyertakan gaya pada tema CMS)

Kelebihan Kams Editor

Kams Editor mempunyai beberapa kelebihan di antaranya adalah sebagai berikut:

  1. Fungsi lengkap
  2. Jumlah file script sedikit dan sangat kecil yaitu terdiri 1 buah file JavaScript (sekitar 22 kb), 1 buah file CSS untuk editor (sekitar 1,5 kb) dan 1 buah file CSS untuk isi (sekitar 0,5 kb)
  3. Penggunaan mudah
  4. Konfigurasi sederhana
  5. Independen (tidak memerlukan server-side script)

Instalasi

Untuk menggunakan Kams Editor, salin file-file Kams Editor dan dimasukkan ke dalam direktori dengan nama "kamseditor". Nama ini dapat diubah sesuai dengan ketersediaan atau sesuai dengan keinginan. Direktori boleh diletakkan secara relatif di bawah atau di atas direktori modul yang menggunakan Kams Editor. Selain itu, direktori Kams Editor juga dapat diakses dengan menggunakan alamat absolut. Akan tetapi, pada penggunaan AJAX, alamat absolut mungkin akan berbasalah dengan adanya cross-server request.

Sebagai contoh, Anda akan menggunakan Kams Editor pada sebuah file HTML yang berada di dalam direktori /public_html. Pada kasus ini, Kams Editor harus berada di bawah direktori /public_html karena public_html adalah root dari semua modul yang dapat diakses dari server oleh pengguna aplikasi, misalnya /public_html/kamseditor. Akan tetapi, jika file HTML yang akan menggunakan Kams Editor berada di dalam direktori public_html/article, maka Kams Editor boleh berada di dalam direktori public_html/kamseditor, public_html/article/kamseditor, dan sebagainya.

TEXTAREA atau INPUT TEXT yang akan diubah menjadi editor HTML WYSIWYG harus mempunyai ID. ID inilah yang akan digunakan oleh Kams Editor untuk mengubah elemen tersebut.

Contoh 1. Menggunakan Kams Editor dengan konfigurasi standard

Kams Editor yang berada di dalam direktori public_html/kamseditor akan digunakan pada file article.php berada di dalam direktori public_html. File article.php berisi form yang akan mengirim data judul dan isi artikel ke file itu sendiri (article.php). Maka berikut ini adalah contoh dari isi file tersebut.

<?php
if($_POST['save'])
{
$content = addslashes($_POST['content']);
$title = addslashes(htmlspecialchars($_POST['title']));
// simpan title dan content ke database dengan script Anda sendiri
}
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Article</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>

<body>
<form name="postform" action="" methode="post"
enctype="multipart/form-data">
Judul Artikel <input type="text" name="title" id="title"><br />
<textarea name="content" id="content" style="width:500px; height:300px"
>Isi awal</textarea><br />
<input type="submit" name="save" id="save" value="Simpan"
onClick="kamseditor.submit();">
</form>
<script type="text/javascript"
src="kamseditor/kamseditor.js"></script>
<script type="text/javascript">
var kamseditor = new KamsEditor("content", "kamseditor", "kamseditor/");
kamseditor.init();
</script>
</body>

Keterangan dari script di atas mulai dari tag FORM adalah sebagai berikut:

FORM

Atribut name, action dapat disesuaikan dengan kebutuhan. Atribut method sebaiknya diset "post" karena pada umumnya isi dari editor cukup besar dan panjang request pada browser dibatasi. Atribut enctype harus multipart karena Kams Editor akan mengubah TEXTAREA menjadi INPUT HIDDEN.

INPUT TEXT

Atribut dari INPUT TEXT disesuaikan dengan kebutuhan.

TEXTAREA

Atribut yang paling penting dari TEXTAREA adalah id karena id tersebut akan digunakan oleh Kams Editor. Pada contoh di atas, id diberi nilai "content". Nilai tersebut dapat disesuaikan dengan kebutuhan. Nilai awal dari TEXTAREA akan digunakan oleh Kams Editor sebagai nilai awal yang dapat diubah oleh pengguna. Perhatikan bahwa semua karakter termasuk spasi putih dan cariage return (enter) yang berada di dalam TEXTAREA adalah data dari TEXTAREA. Atribut style yang penting adalah width dan height yang akan mengatur lebar dan tinggi editor. Lebar dan tinggi dari isi editor akan sama dengan lebar dan tinggi TEXTAREA yang akan diubah menjadi editor. Tinggi editor akan ditambah dengan tinggi toolbar dan footer dari editor.

INPUT BUTTON

Atribut OnClick diset dengan "kamseditor.submit()" untuk mengirimkan nilai dari editor ke INPUT HIDDEN yang dibuat oleh Kams Editor sebagai pengganti TEXTAREA pada saat tombol tersebut diklik. "kamseditor" dapat disesuaikan dengan nama objek yang akan dibuat pada script. "kamseditor.submit()" juga dapat dipanggil pada event onSubmit pada tag FORM.

SCRIPT 1

Atribut src diisi dengan "kamseditor/kamseditor.js" di mana "kamseditor/" adalah alamat relatif dari script "kamseditor.js" terhadap modul "article.php". Atribut tersebut dapat disesuaikan dengan nama direktori dari Kams Editor.

SCRIPT 2

var kamseditor = new KamsEditor("content", "kamseditor", "kamseditor/");

Script di atas akan menciptakan objek dengan nama "kamseditor" dari kelas KamEditor. Pada saat menciptakan objek, KamsEditor membawa 3 parameter.

Parameter pertama adalah string yang merupakan ID dari elemen HTML yang akan diubah menjadi editor HTML WYSIWYG.

Parameter kedua adalah nama dari objek sesuai dengan nama yang akan diciptakan.

Parameter ketiga adalah lokasi dari Kams Editor.

kamseditor.init();

Script di atas akan mengubah TEXTAREA menjadi editor HTML WYSIWYG.

Contoh 2. Menggunakan Kams Editor dengan konfigurasi tambahan

Kams Editor dapat dikonfigurasi sesuai dengan keinginan. Konfigurasi tersebut adalah sebagai berikut:

  1. daftar icon/fungsi yang akan digunakan
  2. daftar jenis huruf yang akan digunakan
  3. lokasi file CSS untuk tampilan editor
  4. lokasi file CSS untuk tampilan isi
  5. lokasi file manager untuk memasukkan gambar dan tautan

Berikut ini merupakan contoh konfigurasi

<script type="text/javascript">
var kamseditor = new KamsEditor("content", "kamseditor", "kamsditor/");
kamseditor.fontlist = new Array("Arial","Arial Black","Arial Narrow",
"Bauhaus","Bell MT","Berlin Sans FB","Bradley Hand ITC","Book Antiqua",
"Bookman Old Style","Calibri","Candara","Comic Sans MS","Cooper Black",
"Courier New","Georgia","Helvetica","Impact","Sans Serif","Tahoma",
"Times New Roman","Trebuchet MS","Verdana");
kamseditor.filemanagerlocation="filebrowser/index.php?editor=kamseditor";
kamseditor.toolbars[0]="bold,italic,underline,strikethrough,format,font,"+
"fontsize,forecolor,hilitecolor,removeformat,symbol,quran,arabic,help";
kamseditor.toolbars[1]="left,center,right,justify,number,bullet,outdent,"+
"indent,blockquote,undo,redo,advimage,table,subscript,superscript,advlink,"+
"unlink,hr,nonbreaking,advcode,advpreview,pagespliter";
kamseditor.framecssfile = "kamseditor/custom.css";
kamseditor.editorcssfile = "kamseditor/kamseditor.css";
kamseditor.init();
</script>