Wednesday, July 30, 2008

Instalasi Word Processor tinyMCE - WYSIWYG

Photobucket

Gw sekarng jadi semangat lagi input tutorial aapapun, kmaren2 memang agak males... tapi sekarng ada tmenna big grinbig grinbig grin

mahap judulna rada panjang, biar mata om google jadi belekan ... lachtot lachtot

About tinyMCE

merupakan word processor (WYSIWYG = What You See is What You Get) terbaik nyang pernah gw temuin, alna gw liat dari fitur2 na oke banged....

Photobucket

Photobucket

sebelumna lu download dlu tinyMCE na di sini:
http://tinymce.moxiecode.com/download.php

pilih nyang ini: tinymce_3_1_0_1.zip (terbaru)

exract ke web root, tros ada baikna memperhatikan dlu beberapa hal di bawah ini:

buka folder examples/full.html

1. main code javascript MCE

Code:


dengan textarea name default =>> "elm"

2 terdapat 2 jenis theme dalam tinyMCE, advance dan simple

Code:
mode : "textareas",
theme : "advanced",
plugins :
dst...


theme advacne: konfigurasi word processor na lebih lengkap, dan hampri semua atribut dalam pengolah word ada disini....

theme simple: tentuna lebih sederhana, dan letak icon word processorna cuma ada di bawah form

3. Mode penggunaan textarea

Code:
mode : "exact",


Code:
mode : "textareas",


Exact: digunakan kalo form yang akan di deteksi sebagai lokasi word processor jumlahnya 1

Textarea: kalo lu pengen semua textarea dalam halaman di jadikan sebagai lokasi word processor tinyMCE


sedangkan plugin bisa lu sesuaikan dengan kebutuhan lu dalam form... yaa misalna kalo form bwat artikel ccc musti lengkap semua plugin ditampilkan... tapi kalo cuman bwat komen, yaa plugin copy paste jangan di ikut sertakan, ntar gambar gambar dmana aja bisa lu paste dalam form lachtot lachtot

Code:
plugins : "safari,pagebreak,advhr,advimage,advlink,emotions,preview",


Beberapa masalah yang timbul saat uji coba instalasi:

1. penggunaan plugin LINK,

http://namadomain.com/index2.php akan diterjemahkan sebagai http://namadomain.com/\"http://namadomain.com/index2.php\"

solusinya:

gunakan script PHP dibawah ini:

Code:

$newsText = addslashes ($_POST['elm']);
echo $VAR_HTML = stripslashes (stripslashes ($newsText));


2. Document Base URI

diperlukan kalo lu pengen ada penggunaan media internal kaya gambar dengan root ngambil dari URL base

Code:
document_base_url : "http://dremi.info/folderbase/",


woke... untuk sample penggunaan na silakan lanjut ke babak berikutna

No comments:

Post a Comment