Tutorial penggunaan Editor WYSIWYG JCE bagi Joomla! 1.5 - penulisan artikel, sisp imej, pautan, musik, video dan lain-lain

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
1

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
2

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.
3

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.
4

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:
5

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:
6

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.
7

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!.
8