Tutorial ini akan menerangkan dengan lengkap cara-cara untuk memasang modul WYISWYG (What You See Is What You Get) atau editor dalam Drupal. Secara lalainya, pemasangan asas Drupal tidak didatangkan dengan sebarang editor terbina dalam.



Drupal menekan kepada prestasi dan kelajuan menjadikan pakej pemasangan asal tidak memuatkan sebarang modul editor selain memberikan ruang kepada pengguna sendiri untuk memilih modul editor tambahan untuk digunakan di laman sendiri.



Editor CKEditor adalah revolusi dari editor sebelum ini iaitu FCKEditor. CKEditor dibina semula dengan kod asas (base code) yang baru dan antara muka yang lebih menarik selain peningkatan proses pelaksaan kod aturcara.



Pemasangan Modul CKEditor



Pertama kita perlu memuat turun modul ini dari laman Drupal.org iaitu modul perhubungan (bridge) untuk menghubungkan CKEditor dengan Drupal.



https://www.drupal.org/project/ckeditor



Fail tersebut adalah dalam format mampatan dan anda memerlukan perisian seperti Winzip atau Winrar yang boleh dimuat turun secara percuma untuk memgembangkannya (extract).



Letakkan keseluruhan direktori "ckeditor" dalam sites/all/modules seperti ini:



Memasang CKEditor dan CKFinder-8031



Kemudian muat turun perisian CKEditor dari laman web ini: https://ckeditor.com/ckeditor-4/download/



Selepas itu, kembangkan dan masukkan ke semua fail-fail yang didatangkan dengan pakej CKEditor tersebut ke dalam direktori modul "ckeditor" tadi.



Hierraki direktori di mana kedudukan semua fail-fail tersebut adalah: sites/all/modules/ckeditor/ckeditor



Memasang CKEditor dan CKFinder-8032



Seterusnya aktifkan modul CKEditor: Administrator Site building Modules.



Memasang CKEditor dan CKFinder-8033



Penetapan Modul CKEditor



Setelah modul tersebut diaktifkan, CKEditor telah sepenuhnya dihubungkan dengan Drupal. Sebelum ianya digunakan, kita akan selesaikan dahulu ke semua tetapan bagi modul ini.



1. Kebenaran (Permission)



Gelungsur ke: User management  Permissions.



Tetapkan kebenaran kepada kumpulan yang boleh menggunakan editor ini. Sebagai contoh berikan kebenaran supaya "authenticated user" boleh mengunakannya (access ckeditor).



2. Format kemasukan (Input Format)



Kemudian kita perlu tetapkan format kemasukan. Gelungsur: Site configuration Input format.



Pada lalainya, Drupal menetapkan penggunaan "Filtered HTML" yang mana hanya beberapa kod HTML yang boleh digunakan. Oleh kerana CKEditor menggunakan pelbagai kod aturcara HTML di belakang pemprosesan, maka kita perlu untuk setkan "Full HTML" sebagai format tapisan utama.



Memasang CKEditor dan CKFinder-8034



3. Tetapan CKEditor



Gelungsur: Site configuration  CKEditor.



Di sini buat tetapan untuk setiap profil dan kumpulan. Sekiranya anda masih baru, elok dibiarkan penetapannya pada nilai lalai (default).



Memasang CKEditor dan CKFinder-8035



Sehingga anda mahir dan faham mengenai modul ini, barulah anda terokainya sendiri.



4. Cubaan



Sehingga tahap ini, kita sudah selesai memasang CKEditor pada Drupal. Anda boleh cuba hasilkan satu artikel atau kandungan baru dan pastinya paparan ini akan dikeluarkan pada ruangan "textarea" tersebut.



Memasang CKEditor dan CKFinder-8036



Integrasi CKEditor dan CKFinder



CKFinder dikeluarkan dengan lesen komersil, yang mana anda perlu melanggannya secara berasingan. Sedangkan CKEditor dikeluarkan dengan lesen GPL (bebas untuk digunakan dan percuma). Tutorial ini sangat sesuai untuk pengguna yang berhajat untuk memiliki lesen komersil CKFinder.



CKEditor fokus kepada penterjemahan dan penulisan editor untuk kandungan dan tidak mempunyai fungsi khas untuk menguruskan, memuat naik dan menyenaraikan fail-fail luaran. Oleh itu kita perlu lakukan integrasi antara CKEditor dan CKFinder.



CKFinder adalah satu perisian tambahan kepada CKEditor yang mana ianya berfungsi untuk menyelenggara segala aktiviti melibatkan memuat naik fail luaran.



1. Memuat turun CKFinder



Seperti CKEditor, CKFinder adalah perisian luaran yang perlu dimuat turun dari laman web rasminya di: https://cksource.com/ckfinder/download.



Memasang CKEditor dan CKFinder-8037



Pastikan anda memuat turun CKFinder untuk versi PHP memandangkan Drupal dijalankan pada aturcara ini. Selepas memut turun, kembangkan (extract) keluar ke seluruhan fail pelipat (folder) "ckfinder" ke dalam direktori modul CKEditor.



Kedudukan untuk fail pelipat CKFinder seharusnya seperti ini: sites/all/modules/ckeditor/ckfinder



Memasang CKEditor dan CKFinder-8038



2. Penetapan Keizinan (permission)



CKFinder mempunyai aturcara untuk membenarkan atau mengizinkan pihak tertentu menggunakannya bagi mengelak sebarang penyalahgunaan. Tetapi aturcara ini menyebabkan persilangan antara keizinan Drupal dan CKFinder. Oleh itu kita perlu membuang kod aturcara ini.



Buka fail sites/all/modules/ckeditor/ckfinder/config.php dengan perisian editor.



BUANGKAN keseluruhan kod aturcara ini:



function CheckAuthentication()
{
    // WARNING : DO NOT simply return "true". By doing so, you are allowing
    // "anyone" to upload and list the files in your server. You must implement
    // some kind of session validation here. Even something very simple as...

    // return isset($_SESSION['IsAuthorized']) && $_SESSION['IsAuthorized'];

    // ... where $_SESSION['IsAuthorized'] is set to "true" as soon as the
    // user logs in your system.
    // To be able to use session variables don't forget to add session_start().

    return false;
}



Tidak perlu risau kerana kod aturcara ini hanya terlibat pada CKFinder tanpa meralatkan fungsinya.



Seterusnya CARI kod aturcara ini:



$baseDir = resolveUrl($baseUrl);



TAMBAHKAN kod aturcara ini di bawah baris kod tersebut agar CKEditor akan memanggil fail yang mengendalikan penyenaraian fail-fail dalam direktori nanti:



require_once '../../../../includes/filemanager.config.php';



Dan hasilnya adalah seperti ini:



ATTENTION: The trailing slash is required.
*/
$baseDir = resolveUrl($baseUrl);

require_once '../../../../includes/filemanager.config.php';



3. Penetapan nama "Cookies"



Oleh karana kita telah membuang kod keizinan sebelum ini, satu-satunya cara untuk membolehkan CKFinder mendapatkan keizinan adalah melalui "cookies". Jadi kita perlu menetapkan nama "cookies" dan mengaktifkannya.



Buka fail: sites/default/settings.php



CARI baris kod aturcara ini:



# $cookie_domain = 'example.com';



Pertama, kita perlu mengaktifkannya dengan membuang tanda hash "#" di depan menjadikannya begini:



$cookie_domain = 'example.com';



Kemudian masukkan nama atau URL laman anda. Ambil perhatian yang nama tersebut mestilah TANPA "http:" dan "www". Hanya nama asal sahaja dimasukkan. SEKIRANYA laman ini berada di "localhost" atau di komputer anda, masukkan "localhost".



Pastikan anda menukarkan nama alamat ini dari "localhost" kepada nama URL laman apabila melakukan proses migrasi dari komputer anda ke pelayan penganjuran web (webhosting). Contoh:



$cookie_domain = 'localhost';



4. Penetapan kebenaran menggunakan CKFinder



Seperti CKEditor, CKFinder dimuatkan elemen pemilihan kebenaran untuk kumpulan tertentu boleh menggunakannya. Terus ke bahagian: User management Permissions.



Tandakan kumpulan yang berhak untuk menggunakan modul ini di bawah senarai "allow CKFinder file uploads".



5. Mengaktifkan integrasi CKEditor dan CKFinder



Sekarang kita perlu mengaktifkan CKFinder sebagai agen atau perisian yang akan menguruskan segala hal-hal perkaitan dengan muat naik fail-fail melalui CKEditor.



Terus ke: Site configuration CKEditor. Klik "Edit" untuk profil kumpulan yang anda telah pilih sebentar tadi. Lihat di bawah tetapan "File browser settings". Setkan semua tetapan seperti berikut:



Memasang CKEditor dan CKFinder-8039



Simpan tetapan ini dan cuba hasilkan satu artikel dan klik pada ikon untuk memasukkan elemen gambar. Anda akan dapati dialog tetingkapnya terdapat dua fungsi tambahan berbanding sebelum ini:



Memasang CKEditor dan CKFinder-8040



Sekiranya semuanya sama, maka selesai proses integrasi CKEditor dan CKFinder

Penilaian: 
5
Average: 4.9 (9 votes)

Komen

mi

salam...sy nak tny...kalo nak upload image dr komputer guna kaedah mcm di atas ke???

parasolx's picture
Admin

yea.. dengan kombinasi dua perkara di atas membolehkan pengguna untuk upload image atau fail sendiri ke dalam server.

dan pasal yang folder "modules" tuh, bleh create sendiri sekiranya belum ada.

------

Hadafi Solution & Resources: http://parasolx.net
Professional in Drupal web development, theme designing, consultation and training

mi

ok dah jadi...tapi bila klik pada button browser tu akan kuar window dgn alamat ini
http://localhost/drupal-6.16/sites/all/modules/ckeditor/ckfinder/ckfinder.html?Type=Images&CKEditor=...
sebab apa ye???

ops dah jadi la...lupa save settings tadi...ok thanks

mi

soalan kedua...dlm directory drupal xda site/all/modules..adkah kena create folder modules

mi

salam..mungkin soalan terakhir kot...dlm drupal ada modul blog kan..saya dah enable modul blog tu dan dah setting permission untuk setiap user post blog...sy juga dh install ckeditor dan dah buat integrasi dgn ckfinder...

so, upload gambar melalui blog dah boleh...cuma bila save gambar x kluar...
macamana ye...???
mslhnya bila pakai create content guna page..gambar kluar la plak...

parasolx's picture
Admin

cuba check "Input format" semasa menghantar kandungan dengan Blog. kemungkinan diset kepada "Filtered HTML" yang menghalang penggunaan kod [img] dalam konteks.

edit semula kandungan blog tadi, dan lihat tetapan pada "Input Format" di bawah "Body".
Only local images are allowed.

------

Hadafi Solution & Resources: http://parasolx.net
Professional in Drupal web development, theme designing, consultation and training

mi

salam...macamana nak tukar background ckeditor...warna dia gelap xnampak tulisan...kat internet ada cara,dia kata kena edit ckeditor.config.js...tp kurg phm dan buat xjd...macmna ye?

parasolx's picture
Admin

1. senang sahaja. Administrator > Site configuration > CKEditor.
2. kemudian klik "Edit" untuk profil yang nak diubah, (cari yang ade "admin" la dulu)
3. tgk tab setting untuk "Editor appearance". Pilih skin "Kama". User interface color: CKEditor default
4. tgk tab setting "CSS" pula.
(a.) Editor CSS: use theme CSS
(b.) Predefined styles: CKEditor default

Lepas tuh "Save configuration" and try tgk.

------

Hadafi Solution & Resources: http://parasolx.net
Professional in Drupal web development, theme designing, consultation and training

mi

admin y mana? y default ke?
ada 2 je kt situ authenticated dan default

parasolx's picture
Admin

dua-dua sekali pon boleh. kalu lagi senang, yang profile default tuh. sebab ianya termasuk sekali dengan "Admin". yang autheticated tuh khas untuk pengguna berdaftar.

------

Hadafi Solution & Resources: http://parasolx.net
Professional in Drupal web development, theme designing, consultation and training

ma

da install ckfinder cam tutorial dlm web nie tpi bile nk set permission xde ckfinder. ade solution tak ??

parasolx's picture
Admin

dah cuba refresh ke? guna PHP version berapa? kalu bleh jgn guna yang 5.3 sebab Drupal still tak full compatible dengan versi nih. salah satu sebab fungsi permission tak keluar.

------

Hadafi Solution & Resources: http://parasolx.net
Professional in Drupal web development, theme designing, consultation and training

mi

Salam parasolx...

kawan ada masalah nak install FCKEditor ( not CKEditor) .boleh bantu x? nested folder tuhh ada pening sikit la ...

TQ ..jika sudi menolong..

parasolx's picture
Admin

bermasalah mcm mane? cuba terangkan dengan details.

------

Hadafi Solution & Resources: http://parasolx.net
Professional in Drupal web development, theme designing, consultation and training

Nazril's picture

Saya dah berjaya selesai install ckeditor dan ckfinder. cuma ada persoalan pada ckfinder
bila saya nak add image, saya klik pada browse server. akan ada pilihan gambar2 didalam folder image dalam server tersebut.. tp ada status mcm nie
"This is the DEMO version of CKFinder. Please visit the CKFinder to obtain a valid licence." mcmmana tu eh..

parasolx's picture
Admin

ckfinder dikeluarkan dengan commercial license. dalam versi demo banyak fungsinya tidak ada dan paparan watermark mmg akan dikeluarkan. jadi mmg tak boleh buat apa melainkan saudara melanggan ckfinder untuk digunakan pada laman sendiri.

** saya telah update tutorial ini mengenai lesen komersil CKFinder

------

Hadafi Solution & Resources: http://parasolx.net
Professional in Drupal web development, theme designing, consultation and training

ke

Bagaimana jika menggunakan module wysiwyg... adakah menggunakan step yang sama... sebab... jika aktifkan wysiwyg module... perlu letakkan ckeditor dalam folder sites\all\libraries....dan saya cube step di atas tapi gagal..

Mohon pencerahan...

parasolx's picture
Admin

kalu guna modul wyiswyg, tak perlu follow arahan di atas. langkah ini hanya untuk memasang ckeditor secara terus tanpa menggunakan modul wyiswyg.

wyiswyg setiap editor kena masukkan dalam sites/all/libraries. tapi sebelum itu kena install modul libraries dahulu. kemudian barulah lakukan tetapan dalam modul wysiwyg untuk pilih editor mana bagi setiap roles.

------

Hadafi Solution & Resources: http://parasolx.net
Professional in Drupal web development, theme designing, consultation and training

ha

salam

saya nak tanya sikit.
Saya dah install CKEditor dan CKFinder. Cuma bila saya upload file gambar guna CKFinder, contoh gambarsaya.jpg, saya nak letak dalam content, tak keluar.

Saya cuba view file gambar tersebut, example.com/sites/default/files/images/gambarsaya.jpg , tapi keluar page not found.

Harap dapat tolong.
Terima kasih.

parasolx's picture
Admin

fail yang diupload tuh ade tak dalam server?

saya anggapkan step2 yang diterangkan diikuti dengan betul la.

------

Hadafi Solution & Resources: http://parasolx.net
Professional in Drupal web development, theme designing, consultation and training

ha

step2 diatas saya dah ikut. Semua berfungsi dengan baik. Proses upload berjalan. Saya dah check file yang diupload, ada dalam server. Boleh view melalui cpanel.

Saya dah cuba letak link image dari external link di function gambar utk CKEditor, gambar keluar elok. Tapi bila letak link internal, tak keluar.

Saya tak boleh access image file.

Ada tak kaitan dengan Clean URL, Pathauto, Global Redirect atau apa2 sistem url yang boleh sebabkannya?

parasolx's picture
Admin

rasanya belum aktifkan satu bahagian pada bahagian Input format. Cuba pegi ke Administer > Site building > Input format. Pilih satu profile, katakan Full HTML, klik edit, kemudian click configure. cuba tgk di situ ade tak apa-apa filter untuk convertkan inline img dari CKFinder ke bentuk markup HMTL.

------

Hadafi Solution & Resources: http://parasolx.net
Professional in Drupal web development, theme designing, consultation and training

ha

saya dah fix error tersebut.

Masalahnya dalam file .htaccess dalam folder sites/default/files/.

Saya buang semua text dalam file tersebut. Sekarang dah ok.

parasolx's picture
Admin

Owh yela.. Saya pun tak terlintas mengenai fail htacess. Sebab sekarang saya dapati pengurusan htaccess aemakin dipertingkatkan ahap penggunaannya.
Mungkin boleh dijadikan panduan kepada semua pengguna mengenai masalah yang mungkin timbul sekiranya berlaku keadaan yang sama.

------

Hadafi Solution & Resources: http://parasolx.net
Professional in Drupal web development, theme designing, consultation and training

Ra

Thx.. gan akhirnya tutornya berhasil juga