Kamis, 18 Maret 2010

TinyMCE - Editor WYSIWYG Javascript

TinyMCE adalah sebuah editor WYSIWYG Javascript HTML yang berbasis web dan platform independent, dan dirilis sebagai Open Source di bawah lisensi LGPL oleh Moxiecode Systems AB. TinyMCE memiliki kemampuan untuk mengubah field textarea HTML atau elemen HTML lainnya sebagai instans editor. TinyMCE juga sangat mudah untuk diintegrasikan ke dalam Content Management Systems lainnya.

Fitur TinyMCE

* Mudah untuk diintegrasikan - Hanya beberapa baris kode yang dibutuhkan.
* Customizable - Tema dan plugin, elemen invalid blok dan memaksakan atribut.
* Browserfriendly - Mozilla, MSIE, FireFox, Opera, Safari dan Chrome.
* Ringan - Gzip kompresor PHP / .NET / JSP / ColdFusion, membuat TinyMCE 75% lebih kecil dan lebih cepat di-load.
* AJAX Compatible - Anda dapat dengan mudah menggunakan AJAX untuk menyimpan dan memuat konten!
* Internasional - Multibahasa mendukung penggunaan paket bahasa.
* Open Source - Gratis di bawah lisensi LGPL, jutaan orang membantu menguji dan memperbaiki editor ini setiap hari.

Petunjuk instalasi

Instalasi TinyMCE sangat sederhana, tinggal ikuti saja petunjuk di sini. Ada beberapa contoh tentang bagaimana mengintegrasikan TinyMCE.

Persyaratan

TinyMCE tidak memiliki persyaratan langsung selain kompatibilitas browser, dan tentu saja JavaScript harus diaktifkan.

Dan TIDAK ADA kode back-end yang didistribusikan bersama TinyMCE.

TinyMCE dapat disetup untuk menggunakan textarea HTML sebagai ruang kerjanya. Bila form dikirimkan ke server, anda dapat memiliki sistem yang melakukan sesuatu dengan isi textarea tersebut, seperti menyimpannya ke database atau file. Frontend juga dapat disetup untuk membaca konten dari file, sehingga anda dapat membuat perubahan terhadap file tersebut.

Download

Untuk petunjuk men-download silakan periksa website TinyMCE.

Mengekstrak arsip

Di Windows anda bisa menggunakan WinZip atau yang serupa, dan pada sistem operasi lain seperti Linux anda cukup mengekstrak arsip dengan perintah 'tar'. Anda dapat menemukan contoh tentang cara mengekstrak file di berbagai situs di internet.

Anda harus ekstrak TinyMCE di wwwroot atau folder tertentu di domain situs anda.

Ambil contoh menggunakan shell

$ cd wwwroot
$ gzip-d tinymce_1_44.tar.gz
$ tar xvf tinymce_1_44.tar


Sebuah struktur folder seperti ini akan dibuat

/tinymce/
/tinymce/docs/
/tinymce/docs/zh_cn/
/tinymce/examples/
/tinymce/examples/zh_cn/
/tinymce/jscripts/
/tinymce/jscripts/tiny_mce/
/tinymce/jscripts/tiny_mce/langs/
/tinymce/jscripts/tiny_mce/plugins/
/tinymce/jscripts/tiny_mce/plugins/
/tinymce/jscripts/tiny_mce/themes/
/tinymce/jscripts/tiny_mce/themes/advanced/
/tinymce/jscripts/tiny_mce/themes/default/
/tinymce/jscripts/tiny_mce/themes/simple/


Membuat perubahan pada situs web anda

Setelah anda mengekstrak arsip, anda perlu mengedit halaman situs untuk menyertakan konfigurasi dan javascript untuk TinyMCE. Harap dicatat bahwa sebaiknya anda hanya memasang TinyMCE javascript pada halaman yang memerlukannya saja, tidak semua halaman dari situs web anda. Jangan lupa untuk mengubah url ke file '.js' di bawah ini agar sesuai dengan instalasi situs anda.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
<title>TinyMCE Test</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>

<!-- OF COURSE YOU NEED TO ADAPT NEXT LINE TO YOUR tiny_mce.js PATH -->
<script type="text/javascript" src="../jscripts/tiny_mce/tiny_mce.js"></script>

<script type="text/javascript">
tinyMCE.init({
mode : "textareas"
});
</script>
</head>
<body>
<!-- OF COURSE YOU NEED TO ADAPT ACTION TO WHAT PAGE YOU WANT TO LOAD WHEN HITTING "SAVE" -->
<form method="post" action="show.php">
<p>
<textarea name="content" cols="50" rows="15">This is some content that will be editable with TinyMCE.</textarea>
<input type="submit" value="Save" />
</p>
</form>

</body>
</html>


Tombol Save dalam contoh ini mengirimkan isi dari textarea ke halaman 'show.php' yang hanya akan menampilkannya kepada anda jika anda membuatnya seperti ini (tentu saja dapat disesuaikan dengan kebutuhan anda untuk menulis konten ke file atau database).

<?php
/* post.php : this page shows what insert.php has sent */

echo(stripslashes($_POST['content']));
?>


TinyMCE

Anda dapat mencoba TinyMCE pada aplikasi di bawah.



Sumber:
[1] Website TinyMCE (http://tinymce.moxiecode.com/)
[2] Dokumentasi TinyMCE (http://wiki.moxiecode.com/)

Tidak ada komentar:

Posting Komentar