1

TUTORIAL EDITOR WYSIWYG

Pengenalan

Editor WYSIWYG (What You See Is What You Get) adalah satu kemudahan untuk membolehkan

admin menulis artikel dengan mudah tanpa memerlukan admin menggunakan kod HTML. Selain dari

menulis artikel, editor juga digunakan untuk menulis dan membina custome module, mencipta huraian

kepada category/section dan lain-lain yang memerlukan alat pengarangan.

Untuk isi kandungan Joomla!, editor boleh mengarang teks, menulis kod-kod plugin untuk tabs,

animasi, audio, video dan kod-kod HTML. Ada pelagai jenis editor WYSIWYG Joomla seperti TinyMCE,

CKEditor, JCE, JoomlaCK, JFK dan sebagainya. Ada yang berjenis percuma dan ada juga yang berjenis

komersial.

Dari pelbagai jenis editor, sama akan membuat penerangan bagi tutorial ini menggunakan editor

WYSIWYG jenis JCE 1.5.6 yang boleh anda muat turun secara percuma di :

http://www.joomlacontenteditor.net/ - muat turun component dan plugin JCE kemudian install ke

Joomla yang anda gunakan. Set pada global configuration, dengan menetapkan editor yang digunakan

adalah JCE.

Editor JCE

Paparan Editor WYSIWYG – JCE 1.5.6

2

Contoh dan perbezaan alat pengarangan editor WYSIWYG Joomla!.

1. Panel Format Pengarangan Editor JCE:

2. Panel Format Pengarangan Editor TinyMCE

3. Panel Format Pengarangan JKEditor

4. Panel Format Pengarangan Editor JoomlaCK

Kegunaan Editor WYSIWYG

1. Menulis Artikel

a. Teks

b. Grafik

c. Jadual

2. Menulis Kod-kod Plugin

a. Tabs

b. Audio

c. Video

3. Menulis Kod HTML

4. Fungsi-fungsi Tambahan

3

Menulis Artikel

1- Teks:

Format kawalan teks

Pelbagai fungsi format teks – Bold, Italik, Underline. Keluarga/jenis teks, sais dan gaya

format. Jajaran dan format typography bagi teks.

Selain itu teks boleh juga diedit dengan fungsi-fungsi berikut:

Warna teks, warna latar, indent, undo, indent nombor atau bullet, potong, salin dan

tampalan.

Anda boleh menulis teks dan artikel dengan mudah menggunakan setiap fungsi format dan

editor WYSIWYG ini tanpa.

2- Grafik:

Terdapat artikel yang memerlukan sokongan grafik atau imej. Anda

boleh selitkan grafik/imej kepada artikel dengan butang image :

Langkah menyisip /

insert imej:

1. Pilih folder

2. Pilih imej

3. Lihat paparan

4. Klik Insert

Jika imej baru anda

perlu upload ke

Root Imej terlebih

dahulu.

A – Boleh cipta

folder jika perlu.

B – Klik butang

upload.

Selepas anda klik butang upload anda perlu muat naik imej tersebut ke root imej.

4

Untuk memuat naik imej lengkapkan tetingkap seperti di bawah:

1. Klik Add untuk memilih

imej dari PC anda.

2. Nama fail imej pilihan

ditunjukkan.

3. Klik butang “Upload”

4. Status menunjukkan

proses upload berjaya.

Selepas berjaya upload tutup tetingkap

ini dan sisipkan imej ke artikel seperti

langkap ‘menyisip /insert imej di atas.

Note: Cara ini hanya sesuai jika anda menggunakan editor JCE sahaja. Jika menggunakan

editor lain gunakan kemudahan butang ‘xtd’ yang terdapat di bahagian bawah editor.

3- Jadual:

Membina jadual boleh dilaksanakan dengan fungsi format table seperti di bawah:

Mencipta

jadual klik

butang

seperti ini.

Kemudian masukkan bilangan lajur dan

baris yang dikehendaki .

Contohnya :

Lajur = 3

Baris = 5

Border = 0 (tiada border )

Kemudian klik “Insert”.

Anda boleh edit jadual yang dicipta dengan fungsi-fungsi di bawah bagi memadam jadual,

properti jadual atau sel, menambah dan membuat lajur atau baris dan membuat cantuman sel.

5

Menulis Kod Plugin

Kod plugin dapat membantu anda menyelitkan ke dalam artikel sisipan seperti fungsi Tabs,

pemain audio dan pemain video.

a- Plugin Tabs:

Terlebih dahulu install extension plugin berjenis tabs seperti ‘JoomlaWorks TS’ yang boleh

dimuat turun dari : http://www.joomlaworks.gr/

Untuk membolehkkan anda membuat tab pada artikel tulis kod plugin seperti di bawah pada

ruangan editor WYSIWYG –

Contoh di atas anda akan membina 2 (dua) tab jika anda mahu lebih, tulis seperti format di atas

beberapa lagi tab seperti dalam kotak . Pastikan anda menulis kod tab sebelum penutup{/tabs}.

b- Plugin Audio:

Anda juga perlu install terlebih dahulu plugin untuk audio. Saya cadangkan anda menggunakan plugin audio ‘1Pixelout Audio Player v1.5.2’ dengan memuat turun dari : http://www.1pixelout.net . Apabila sudah dipasang dalam web anda untuk memasukkan audio tulis format seperti di bawah:

{audio}mp3/your_file.mp3{/audio}

Format ini tidak akan berfungsi jika anda tidak membina satu folder untuk fail audio anda dengan nama mp3 pada server root web anda. Setelah folder bernama ‘mp3’ telah anda cipta, upload fail audio seperti format di atas (mp3) ke dalam folder tersebut.

Tips: pastikan nama setiap fail audio anda pendek dan satu perkataan sahaja untuk menggelakkan broken link.

Pada artikel anda akan perolehi pemain audio seperti di bawah:

6

c- Plugin Video:

Sama seperti yang lain dapatkan atau muat turun plugin yang sesusai kemudian install ke web

anda. Saya cadangkan gunakan plugin ‘Jplayer’ yang boleh diperolehi di:

http://vault.futurama.sk/joomla/download-jplayer

Pada ruangan editor anda boleh selitkan video berformat flv atau mp4 dengan format:

{flv}your_file{/flv}

atau

{mp4}your_file{/mp4}

Formatnya berbeza sedikit dengan format penulisan plugin audio. Anda tidak perlu tulis nama

folder yang menyimpan fail video (flv atau mp4) termasuk format failnya. Tuliskan nama fail

sahaja seperti contoh di atas.

Walau bagaimanapun, plugin tidak akan berjaya memainkan video jika sumber /fail video

tersebut tidak anda muat naik ke server web. Kali ini anda perlu cipta satu folder bernama

‘video’ tetapi sebagai sub-folder di dalam folder /media. Caranya, pada root server seb anda,

masuk ke folder /media kemudian create folder baru bernama video. Kemudian upload fail

video anda ke folder tersebut.

Lokasi sumber video; /media/video

Tips: bagi menggelakkan broken link, pastikan anda menamakan fail dengan nama tunggal (satu

perkataan).

Contoh paparan pada artikel di halaman web anda:

7

Menulis Kod HTML

Ada kalanya walaupun dengan kemudahan editor WYSIWYG anda tidak perlu menulis format

artikel secara kod HTML tetapi anda perlu juga menulis kod ini untuk mendapatkan paparan

atau fungsi XML tertentu.

Caranya anda tutup (hide) editor WYSIWYG JCE anda pada butang :

Seterusnya barulah anda salin kod HTML atau XML yang dikehendaki dan tampalkan di dalam

ruangan editor.

Contoh – kod paparan waktu solat: sumber: http://www.e-solat.gov.my/ dapatkan kod ikut

lokasi anda – contoh : kelantan:

<center>

<iframe src=http://www.e-solat.gov.my/solat.php?

kod=ktn01&lang=BM&url=URL&BGCOLOR=”#009933″ scrolling=”No”

align=”middle” valign=”top” width=”190″ height=”340″ marginwidth=”0″

marginheight=”0″ frameborder=0></iframe>

</center>

Pada artikel anda akan perolehi paparan seperti di bawah:

Anda boleh dapatkan pelbagai kod HTML atau XML dan gunaka cara ini untuk meletakkan pada

artikel anda.

8

Fungsi Tambahan Editor WYSIWYG

a- Read More

Anda boleh menggunakan kemudahan ini untuk memendekkan paparan teks pada halaman

utama. Butang ‘read more’ akan dipaparkan dan pengguna boleh gunakan butang ini untuk

memperolehi artikel penuh.

Untuk menggunakan fungsi ini tulis sepenuhnya artikel anda, kemudian potong pada bahagian

tertentu dengan meletakkan ‘cursor’ anda kemudian klik butang fungsi ini:

Anda boleh juga menggunakan butang ‘xtd’ ini :

b- Page Break

Jika artikel anda terlalu panjang anda boleh paparkan dalam beberapa bilangan halaman. Untuk

tujuan sebegini gunakan fungsi ‘page break’. Anda boleh gunakan butang editor atau butang

‘xtd’ seperti di bawah:

Atau

Untuk menggunakan fungsi ini pilih di mana artikel yang ingin anda potong menjadi beberapa –

letakkan ‘cursor’ dan klik butang ‘page break’ , kemudian anda perlu masukkan sub-tajuk untuk

halaman tersebut. Ini menunjukkan anda telah membahagikan artikel anda kepada beberapa

halaman, contoh:

Penutup

Walaupun diterangkan 4 fungsi dan kegunaan utama editor WYSIWYG, namun dengan kreativiti

dan pengalaman, anda boleh pelbagaikan lagi kegunaan editor ini khusus dalam menghasilkan artikel

dan memperkayakan laman web anda dengan maklumat. Selamat Maju Jaya!.