TUTORIAL EDITOR WYSIWYGPengenalan       Editor WYSIWYG (What You See Is What You Get) adalah satu kemudahan untuk memboleh...
Contoh dan perbezaan alat pengarangan editor WYSIWYG Joomla!.          1. Panel Format Pengarangan Editor JCE:          2....
Menulis Artikel       1- Teks:          Format kawalan teks           Pelbagai fungsi format teks – Bold, Italik, Underlin...
Untuk memuat naik imej lengkapkan tetingkap seperti di bawah:                  1. Klik Add untuk memilih                  ...
Menulis Kod Plugin       Kod plugin dapat membantu anda menyelitkan ke dalam artikel sisipan seperti fungsi Tabs,pemain au...
c- Plugin Video:   Sama seperti yang lain dapatkan atau muat turun plugin yang sesusai kemudian install ke web   anda. Say...
Menulis Kod HTML      Ada kalanya walaupun dengan kemudahan editor WYSIWYG anda tidak perlu menulis format      artikel se...
Fungsi Tambahan Editor WYSIWYG   a- Read More      Anda boleh menggunakan kemudahan ini untuk memendekkan paparan teks pad...
Upcoming SlideShare
Loading in …5
×

Tutorial editor wysiwyg

2,813 views

Published on

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

1 Comment
3 Likes
Statistics
Notes
  • bagaimana cara download
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
2,813
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
132
Comments
1
Likes
3
Embeds 0
No embeds

No notes for slide

Tutorial editor wysiwyg

  1. 1. TUTORIAL EDITOR WYSIWYGPengenalan Editor WYSIWYG (What You See Is What You Get) adalah satu kemudahan untuk membolehkanadmin menulis artikel dengan mudah tanpa memerlukan admin menggunakan kod HTML. Selain darimenulis artikel, editor juga digunakan untuk menulis dan membina custome module, mencipta huraiankepada 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 berjeniskomersial. Dari pelbagai jenis editor, sama akan membuat penerangan bagi tutorial ini menggunakan editorWYSIWYG 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 keJoomla yang anda gunakan. Set pada global configuration, dengan menetapkan editor yang digunakanadalah JCE.Editor JCE Paparan Editor WYSIWYG – JCE 1.5.6 1
  2. 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 JoomlaCKKegunaan Editor WYSIWYG1. Menulis Artikel a. Teks b. Grafik c. Jadual2. Menulis Kod-kod Plugin a. Tabs b. Audio c. Video3. Menulis Kod HTML4. Fungsi-fungsi Tambahan 2
  3. 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. 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. 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. 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. 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. 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 kreativitidan pengalaman, anda boleh pelbagaikan lagi kegunaan editor ini khusus dalam menghasilkan artikeldan memperkayakan laman web anda dengan maklumat. Selamat Maju Jaya!. 8

×