Pada dasarnya, tidak ada elemen HTML yang dapat membantu user untuk memasukkan tulisan yang mendukung visual formatting alias kita dapat memformat atau mengatur style dari tulisan secara visual (WYSIWIG). Namun seiring berkembangnya kebutuhan dan berkembangnya browser yang digunakan untuk menampilkan file HTML, sebuah text editor yang WYSIWIG (saya sebut saja rich text editor) dapat kita buat.

Perlu diperhatikan juga, fasilitas pembuatan rich text editor ini menggunakan fasilitas yang disediakan oleh browser dan ternyata tidak semua browser menyediakan fasilitas ini. Contoh browser yang memiliki fasilitas ini adalah Mozilla sekeluarga dan Internet Explorer. Selain itu, javascript ikut berperan serta dalam pembuatannya.

Oh iya, browser yang saya jadikan kelinci percobaan adalah Mozilla Firefox. Sehingga mungkin saja terjadi masalah pada browser lain :D

Mengaktifkan design mode

Design mode adalah sebuah fasilitas yang ditambahkan pada sebuah dokumen HTML sehingga dokumen tersebut dapat menjadi sebuah rich text editor.

Cobalah potongan javascript berikut ini. (demo 1).

document.designMode = 'on';

Maka secara ajaib dokumen HTML yang Anda buka akan menjadi sebuah editor!

Karena kita tidak ingin membuat dokumen yang sedang dibuka menjadi sebuah editor, maka kita perlu untuk membuat dokumen lain yang berada di dalam dokumen yang sedang dibuka. Untuk itu, kita akan menggunakan elemen IFRAME. Dokumen HTML yang berada di dalam IFRAME itulah yang akan dijadikan sebuah editor.

Catatan: Pada referensi yang saya pakai, penggunaan IFRAME tidak disebutkan. Sehingga mungkin sebenarnya elemen HTML lainnya juga dapat dipakai. Namun saya belum berhasil menggunakannya :D

Silakan coba lagi source code di bawah ini. (demo 2).

<iframe id="editor"></iframe>
<script type="text/javascript">
    document.getElementById("editor").contentWindow.document.designMode = 'on';
</script>

Menambah fasilitas formatting

Editor yang sudah dibuat sebelumnya mungkin belum cukup disebut sebagai rich text editor karena belum ada fasilitas formatting sehingga style dari tulisan dapat diubah-ubah. Walau sebenarnya Anda bisa saja copy-paste dari dokumen lain karena stylenya akan tetap dibawa.

Dari sekian banyak fasilitas untuk memformat tulisan, saya akan mencoba memasukkan sebagian saja. Sisanya menjadi PR untuk Anda :P Fasilitas-fasilitas tersebut adalah

1. Bold
2. Underline
3. Italic
4. Insert hyperlink

Pertama-tama, buatlah elemen HTML lain yang menjadi user interface bagi pengaktifan fasilitas tadi. Dalam tutorial ini, saya akan menggunakan tombol biasa. Masing-masing tombol saya masukkan sebuah fungsi javascript yang akan dipanggil ketika event onclick pada tombol terjadi yaitu saat tombol diclick.

<input type="button" value="Bold" onclick='format("bold")'/>
<input type="button" value="Underline" onclick='format("underline")'>
<input type="button" value="Italic" onclick='format("italic")'/>
<input type="button" value="Insert hyperlink" onclick='format("createlink")'/>

Berikut ini adalah isi dari fungsi format dalam javascript.

function format(command) {

    var editor = document.getElementById('editor');
    var doc = editor.contentWindow.document;
    var param = null;

    //beberapa fungsi membutuhkan penanganan khusus
    //contohnya adalah untuk menambah hyperlink
    if (name == 'createlink') {
        //tanya URL
        param = prompt('URL', 'http://');
    }

    //perintahkan dokumen pada editor untuk memasang format yang diminta
    doc.execCommand(command, false, param);
}

Source code lengkap dapat dilihat dalam (demo 3).

Ada beberapa perintah yang mungkin akan ditolak oleh browser, seperti copy, cut, dan paste. Sampai sekarang saya belum tahu bagaimana cara agar perintah-perintah ini dapat dijalankan :D Tapi kombinasi tombol Ctrl+C, Ctrl+X, dan Ctrl+V masih tetap bisa digunakan kok.

Menghubungkan dengan form

Sampai saat ini kita sudah berhasil membuat sebuah editor. Namun agar editor ini dapat dipergunakan selayaknya form biasa, maka tulisan yang berada dalam editor juga harus dapat dikirim saat form disubmit.

Salah satu cara yang dapat dilakukan adalah dengan menggunakan sebuah textarea yang akan digunakan untuk menampung source code dari tulisan dalam editor. Disebut source code karena memang sebenarnya yang ditulis dalam editor adalah sebuah dokumen HTML biasa.

Proses pemindahan ini akan dilakukan saat form akan disubmit. Sehingga perlu menangkap event onsubmit pada form.

Untuk memindahkannya sendiri, cukup salin nilai dari properti innerHTML pada elemen body dalam dokumen milik editor ke dalam textarea.

function salin() {
    var doc = document.getElementById('editor').contentWindow.document;
    var body = doc.body;
    var textarea = document.getElementById('textarea');

    textarea.value = body.innerHTML;
}

Untuk menangkap event onsubmit dan membajak proses submit, perhatikan source code di bawah ini.

<form ... onsubmit="return cekform()">

Pada fungsi cekform(), proses submit akan ditentukan kelanjutannya apakah diteruskan atau dibatalkan. Jika fungsi tadi mengembalikan nilai true, maka proses submit akan diteruskan. Begitu pula sebaliknya.

Pada fungsi cekform() ini, fungsi salin() yang sebelumnya dibuat akan dipanggil. (Sebenarnya bisa saja langsung panggil fungsi salin() pada event onsubmit itu).

function cekform() {
    salin();
    return true;
}

Untuk hasil akhir, dapat dilihat pada (demo 4). Form yang ada dalam demo 4 tersebut saya hubungkan dengan sebuah script php yang akan menampilkan nilai yang disubmit.

Kalau Anda perhatikan, setiap bagian tulisan yang diberi format, maka akan diformat dengan menggunakan CSS. Misalnya setiap tulisan yang ditebalkan akan diapit oleh <span style="font-weight: bold;"> dan </span>. Jika Anda lebih menyukai untuk menggunakan elemen HTML yang ada (misalnya B), maka Anda dapat mematikan penggunaan CSS dengan menambahkan perintah berikut setelah mengaktifkan design mode.

document.getElementById("editor").contentWindow.document.execCommand('useCSS', false, null);

Hasilnya dapat dilihat pada (demo 5).

Catatan: Pada dokumentasi terbaru, perintah useCSS ternyata sudah ditinggalkan dan diganti dengan styleWithCSS. Tapi pada browser Mozilla Firefox 1.0.4 yang saya gunakan sekarang, jika styleWithCSS yang dipakai maka akan terjadi error pada javascriptnya.

Referensi

1. Midas Specification
2. Mozilla Editor
3. Rich text editor lainnya *lupa*