Integrasi Teks Editor NicEdit ke Form HTML

NicEdit

Adalah JavaScript teks editor yang memudahkanmu memformat teks langsung dihalaman browsermu.

Penggunaan

Buatlah Folder bernama testing

Download NicEdit dariĀ http://nicedit.com/ dan simpan pada folder testing

Lalu extractlah file hasil downloadnya pada folder testing maka akan menghasilkan isi seperti gambar dibawah ini:

Metode allTextArea()

Digunakan untuk mengintegrasikan NicEdit ke semua elemen textarea HTML.

Contoh:

Buatlah satu file HTML bernama all_textarea.html dan masukkan kode berikut ini:

<html>
<head>

<script type=”text/javascript” src=”nicEdit.js”></script>

<script type=”text/javascript”>

bkLib.onDomLoaded(function() { nicEditors.allTextAreas() });

</script>

</head>
<body>

<p>

Alamat : <textarea cols=”40″ rows=”7″></textarea>

</p>
<p>

Keterangan : <textarea cols=”40″ rows=”7″></textarea>

</p>

</body>
</html>

Lalu simpan pada folder testing.

Hasil:

Sekarang buka file all_textarea.html melalui browsermu maka akan menghasilkan seperti gambar dibawah ini:

NicEdit dengan tampilan default

Buatlah satu file HTML bernama default.html dan isi dengan kode berikut ini:

<html>
<head>
<script type=”text/javascript” src=”nicEdit.js”></script>
<script type=”text/javascript”>

bkLib.onDomLoaded(function() {

new nicEditor().panelInstance(‘alamat’);

});

</script>

</head>
<body>

<p>

Alamat : <textarea id=”alamat” cols=”40″ rows=”7″></textarea>

</p>

</body>
</html>

Hasil:

NicEdit dengan Semua Tombol

Rubahlah file default.html dengan isi seperti dibawah ini:

<html>
<head>
<script type=”text/javascript” src=”nicEdit.js”></script>
<script type=”text/javascript”>

bkLib.onDomLoaded(function() {

new nicEditor({fullPanel:true}).panelInstance(‘alamat’);

});

</script>

</head>
<body>

<p>

Alamat : <textarea id=”alamat” cols=”40″ rows=”7″></textarea>

</p>

</body>
</html>

Hasil:

NicEdit Kustomisasi Tombol

Kamu bisa memilih tombol apa saja yang kamu mau tampilkan.

Rubahlah file default.html menjadi seperti dibawah ini:

<html>
<head>
<script type=”text/javascript” src=”nicEdit.js”></script>
<script type=”text/javascript”>

bkLib.onDomLoaded(function() {

new nicEditor({buttonList : [‘fontSize’,’bold’,’italic’,’underline’,’strikeThrough’,’subscript’,’superscript’,’html’,’image’]}).panelInstance(‘alamat’);

});

</script>

</head>

<body>

<p>
Alamat : <textarea id=”alamat” cols=”40″ rows=”7″></textarea>
</p>

</body>
</html>

Hasil:

Jika tutorial ini bermanfaat silahkan katakan ‘Terima Kasih Fahmi Basya Kartapura‘.

You may also like...

1 Response

  1. Seno says:

    Bisa engga diaplikasikan bareng2 TDO Miniform bang? Penginnya sih buat form Kirim Artikel yg WYSIWYG buat user umum, shg si pengirim tdk perlu masuk admin page.

Leave a Reply

Your email address will not be published. Required fields are marked *