Sebelum jum’at-an ku berfikir bagaimana caranya agar input form khususnya type text bisa seperti situs WORDPRESS, untuk itu saya langsung berlari menuju teman-teman ku yang telah berpengalaman dalam hal ini, saya bertanya “Kang Andi gimana biar input form bisa kaya wordpress”, Kang Andi menjawab “Oh, itu mah pakai tinymce aja”, setelah dialog singkat itu, aku pun bergegas mencari dan menkonfigurasi tinymce itu yang saya integrasikan dengan project codeigniter saya.
Ok, dapat, waktunya insatalasi … let’s begin …
Langkah awal pastinya download Tinymce-nya dulu, di situs resmi-nya yaitu http://tinymce.moxiecode.com/ .
Selanjutnya ekstrakt file tersebut, kemudian masuk ke folder hasil ekstrakt maka akan mucul 1 buah folder bernama tiny_mce, masuk ke folder tersebut, lalu pilih folder jscript, maka akan muncul folder tiny_mce, nah folder itulah yang anda copy dan masukkan ke folder codeigniter anda tapi jangan lupa untuk membuat folder dengan nama js terlebih dahulu dan masukkan folder tiny_mce itu ke dalam-nya.
Langkah kedua, buat file php di dalam direktori /system/application/view/, dan isi dalam folder-nya seperti ini :
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<html>
<script type=”text/javascript” src=”/inventory/js/tiny_mce/tiny_mce.js”></script>
<script type=”text/javascript”>
tinyMCE.init({
// General options
mode : “textareas”,
theme : “advanced”,
plugins : “safari,spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,
iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,
fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,imagemanager,filemanager”,
// Theme options
theme_advanced_buttons1 : “save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,
justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect”,
theme_advanced_buttons2 : “cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,
undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor”,
theme_advanced_buttons3 : “tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,
ltr,rtl,|,fullscreen”,
theme_advanced_buttons4 : “insertlayer,moveforward,movebackward,absolute,|,styleprops,spellchecker,|,cite,abbr,acronym,
del,ins,attribs,|,visualchars,nonbreaking,template,blockquote,pagebreak,|,insertfile,insertimage”,
theme_advanced_toolbar_location : “top”,
theme_advanced_toolbar_align : “left”,
theme_advanced_statusbar_location : “bottom”,
theme_advanced_resizing : true,
// Example content CSS (should be your site CSS)
content_css : “css/example.css”,
// Drop lists for link/image/media/template dialogs
template_external_list_url : “js/template_list.js”,
external_link_list_url : “js/link_list.js”,
external_image_list_url : “js/image_list.js”,
media_external_list_url : “js/media_list.js”,
// Replace values for the template plugin
template_replace_values : {
username : “Some User”,
staffid : “991234″
}
});
</script>
<form action=”/inventory/index.php/upload/do_upload” method=”post” enctype=”multipart/form-data”>
<h3> ADD GALLERY AND EVENT</h3>
<table>
<tr>
<td><font face=calibri size=2 style=”line-height:300%”>Name</td>
<td>: <input type=”text” name=”name”></td>
</tr>
<tr>
<td><font face=calibri size=2 style=”line-height:300%”>Title</td>
<td>: <input type=”text” name=”title”></td>
</tr>
<tr>
<td valign=top><font face=calibri size=2 style=”line-height:300%”>Content </td>
<td>       <textarea name=”content” style=”width:100%”>
</textarea></td>
</tr>
<tr>
<td><font face=calibri size=2 style=”line-height:300%”>Upload Image</td>
<td>: <input type=”file” name=”userfile” size=”20″>
</tr>
<tr>
<td><input type=submit value=”submit”></textarea></td>
</tr>
</form>
</table>
</body>
</html>
Simpan file tersebut dengan nama terserah anda, yang penting ekstensinya php, karena codeigniter tidak bisa load file selain ekstensi php.
Setelah disimpan, maka waktunya anda melakukan test terhadap file tersebut, maka apabila berhasil akan muncul gambar dibawah ini :
Anda tertarik, segera coba dan kemukakan keluhanmu disini, script yang saya tulis 100% kebenarannya, jadi selamat mencoba 
error bos…,???
setelah saia download tiny_mce dan meletakkan-ny di folder
CodeIgniter/js/ tiny_mce.
setelah itu saia copy code yg untuk di view, tapi setelah akan di save, muncul error spt ini:
“The documents current encodingcan not correctcly save all of the characters within document. You may want to change to UTF-8 or an encoding that supports the special characters in this document”
padahal sedikit pun tidak ada saia ubah code-ny..itu knapa yach..,???
kamu udah pake script DOCTYPE blum diatas tag html ??
trus perhatikan spasi di setiap karakter , saya yakin itu bener , karena saya sudah coba dan hasilnya berhasil , seperti gambar yang ada diatas ..
cobain aja lagi ..
yg ini kan:
udh aq isi koq diatas tag html..,pkokny persis aq copy paste code yg diatas..,tapi ketika disave muncul warning spt yg saia blg sebelumnya..,
bisa mas, tapi form yg muncul spt biasa, tdk spt yg diharapkan spt yg di wordpress..,
1. ap saia salah pada scrip ini :
script di atas saia ganti dgn :
src=”/js/tiny_mce/tiny_mce.js”>
dan saia jg mencoba script ini :
<script src="../../../js/tiny_mce/tiny_mce.js"
tapi te2p tidak bisa, itu knapa yach..,'mhon bim2ngan-ny ne..,!!
2. ato saia salah menempatkan folder tinymce???
saia menempatkannya di dalam file CI saia yaitu :
CodeIgniter/js/ tiny_mce
sudah saia coba tapi hasilnya tidak spt yg diharapkan, tampilan formnya biasa, tidak muncul spt yg di wordpress..,
1. ap saia salah pada code :
sudah saia ganti dengan:
<script type=”text/javascript” src=”/js/tiny_mce/tiny_mce.js”>
saia jg coba dengan :
src=”../../../js/tiny_mce/tiny_mce.js”
tapi te2p ngk muncul spt yg di wordpress itu, tampilanny biasa saja.., itu knapa yach.,??
2. ato saia salah pada penempatan file tinymce…,saia menempatkannya di dalam folder CI saia, yaitu:
CodeIgniter/js/ tiny_mce
mhon petunjuk-ny guru…,^_^
ok , mas agus coba langkah dibawah ini :
1. code sudah benar yaitu :
script type = ”text/javascript” src = ”codeigniter/js/tiny_mce/tiny_mce.js”
2. pastikan susunan direktori dan file sudah benar , seperti di bawah ini :
pertama , didalam folder codeigniter kita buat folder js
kedua , didalam folder js terdapat folder tiny_mce
ketiga , didalam folder tiny_mce terdapat folder tiny_mce lagi yang berisi folder langs, folder plugins , folder utils , folder themes , file tiny_mce.js , file tiny_mce_src.js , dan file tiny_mce_popup.js .
3. saya minta email mas agus , biar nanti saya kirim langsung file untuk input form nya , saya takut saya salah nulis di blog …
4 . saya tunggu emailnya
ne email saia mas:
cah_ajus@yahoo.com
terima kasih banyak ne mas..,sungguh sangat membantu dalam pengerjaan skripsi saia..,!!^_^
tunggu ja , saya lngsung kirim , tinggal ganti nama folder2 nya ja
susunan direktori file saia yaitu:
pertama , didalam folder codeigniter saia buat folder js
kedua , didalam folder js terdapat folder tiny_mce yang berisi folder langs, folder plugins , folder utils , folder themes , file tiny_mce.js , file tiny_mce_src.js , dan file tiny_mce_popup.js.
saya sudah kirim ke email cah agus . dicoba lagi
wokeee….berhasil……,
terima kasih akbar…,!!^_^
ya sama2 sukses dengan skripsi nya , kalau ada yang mau ditanya langsung tanya ja mas , ga usah nunggu postingan dari saya
Sama tolong sebarin blog saya ke teman2 mas agus ya ^_^
Thks ..
Okey dech, thanks bgt buat referensix boz,,,
sebenarnya masih banyak yang belum saya posting ke blog saya ini , karena saya lagi buat aplikasi bernama IIMS yang murni CI dan menggunakan tempalting smarty serta MySQL sebagai database nya
Kita sama2 berbagi pengalaman tentang CI ya
thkz for comment
Mas-mas yang udah pake tinyMCE, udah bisa ngebrowse gambar pake tinyMCE?
klo udah gimana yach caranya klo saya pengen masukin gambar di tinyMCEnya
thx
salam kenal semua ^_^
ok akan saya jawab ,,
tapi pertama jangan panggil saya “mas” karena saya masih 17 tahun ya .
Ok , untuk melakukan upload gambar biasanya dilakukan secara terpisah dengan tinyMCE nya ,
Tapi bisa juga dengan menggunakan toolbar di tinyMCE nya yg digunakan buat insert gambar . ,
Kalau mas wsenjaya gunakan cara yang saya post , pasti bisa buat masukin gambar ko..
cobain ja ,, kalau ada maslah silahkan comment
alooo dek…. aku belum bisa install tinymce na di codeigniter,,,,,,
bagaimana yahh….
saya sudah ikuti tutor diatas tetap tidak bisa…..
yang sudah bisa … tolong jelasin ke aku donkk…. trimss….
agar ku bisa…
Salam kenal.Mas buat upload gambarnya yg pakai modul lain gmn?yg kira ky d joomla,pertama browse lalu mengambil gambar dri lokal dan meletakan ke server dan menaruh link ke tinyMCE
pertama , mksih bwt kunjungannya ,
kedua saya masih 17 tahun , jadi belom pantes di panggil mas .. hhe
untuk itu , saya coba buat upload gambarnya pke modul php biasa , ga pake tinyMCE karena terlalu ribet , kalo Leni ingin tahu script nya ,, leni kasih tau email Leni aja , biar nanti saya kirim …
ku tunggu yapz ^_^
wah mas.. kirim kan aku juga tuh File.. ^^ saya juga sedang skripsi nih..
mas, kasus saya percis kyk cahyadi..
mnt tolong kirim ke email aja donk mas…
biar filenya g rusak, takutnya file yg ditulis di sini, ada karakter2 yg salah translate gt…
makasih sebelume,,,
mana alamat email kalel ?? ^_^ saya tunggu … =)
mas, saya mnt filenya juga donk mas,,
kirim ke email ya mas..
makasih
kalel email’y apa ?? saya tunggu emailnya ya .. ^_^
mas boleh minta kirimin source code yang pake CI g ?
makasih yah sebelumnya…
mitsui_juli_herlambang@yahoo.com
lah kok mas yang punya ane “emotions” nya gak mw muncul di view nya siy…padahal di form nya siy dah bagus, setelah di ‘ post’ kok yang tapil hanya tulisan ‘Cry’ ‘Cool’ atau ‘Foot in mouth’ nya aj siy…kira2 apanya ya??….thks
@ nanxz : Makasih udah mampir, itu sederhana, masalah itu hanya disebabkan oleh browser yang tidak support terhada emotions. Kalau kamu pakai firefox tidak muncul coba pke IE atau Opera ..
mas kalo mau nge validasi yang tinyMCE gmn yah?
biar user klo ga ngisi ga bisa ngesave..
makasih mas, klo bisa jawabannya dikirim juga ke email biar saya bisa tau cepet..ni mas emailnya cloudyearth@gmail.com
mkasih
@ Fazar : Itu mudah, kamu tinggal buat function aja, yang berisi proses validation, jadi apabila post tinymce bernilai 0, proses tidak akan dilanjutkan.
mas, tolong kirimi saya juga donk script nya
Sebelumnya makasih banya ya.
opalqu@yahoo.co.id
mas saya minta sourcenya ya..
ne email saya mas cahyocool@gmail.com
terima kasih mas…
Bisa minta sourcenya dikirim ke indra.dot@gmail.com ga bar? ini dah nyoba dari tadi ga bisa2.. bingung yg salah apaan..
tx buat bantuannya..
tolong kirimin scriptnya dong mas,..kirim kesini yaaak,,..
dyt.axl@gmail.com
thanx,..
iya.. sempet kebingungan juga dengan postingan di atas..
krn sudah dirunut jalannya file benar.. tpi gkmo tampil..
yang aku mau tanyain..
itu di bagian content:
Content
       
nah    itu aslinya code nya apa ya?
coz itu yg bkin gkmo tampil tinymce nya.
tambahan:
minta tolong dikirim kan file nya sperti tmn2 yang lainnya ya mas.. mungkin aku yg gak teliti dalam mengcopy atau gmn..
haidinda@yahoo.com
terimakash mas..
Maaf mas… pnya sy juga blum bisa muncul tiny nya..padahal udah mengikuti tutorial.. email sy vazulfah@gmail.com makasih
Mas aq maw tanya…
aq dah bisa nampilin tini_mce nya..
tapi sewaktu tak simpien kok textareanya valuenya kosong..
padahal tak alert lewat javascript keluar valuenya..
btw tu knp mas..
thnks sblumnya…
Akbar.. saya boleh minta filenya ga? klo boleh tolong kirimkan ke email saya yah.. myr_benedict@yahoo.co.id.. karena saya mengalami hal yang sama dengan yg di alami cahyadi.. makasih
bisa tolong kirimin filenya ke email saya.. myr_benedict@yahoo.co.id
krn saya mengalami hal yang sama dengan cahyadi.. thanks
Untuk semuanya yang mengalami masalah, tinymce tidak muncul, tolong kirim email anda ke akbar.h2so4@gmail.com, saya akan segera kirim source code, karena saya kebingungan siapa saja yang ada kesulitan dalam materi ini
Terimakasih
Akbar
@ Mryna : Bisa lewat YM aja ga ? supaya saya bisa jelaskan langkah demi langkah. Untuk Semuanya saya minta maaf, dalam postingan ini memang ada kesalahan translate kode, oleh karena itu bagi yang mempunyai masalah sejenis, bisa kirim email anda, segera akan saya kirim source code yang asli.
terimakasih
mas, tolong kirimi saya juga donk script nya
Sebelumnya makasih banyak ya.
ditempatsemula@ymail.com
mlm mz,.,
sya masih pertama peke tiny mce tolong bantuannya, n sya sngat terbantu dengan postingan di atas tp setelah sya coba kok msh da yg salah.
bs kirimi sya scriptx yaw di emailq sajadah99@gmail.com
mksih,.,.
tolong kirimi file yang sama cz sya mash da kesalaha
trim,.,.
sajadah99@gmail.com
Mas aku dah nyoba script yg diatas tapi masi tetep. error, bisa minta dikirim via email ga. ini emailnya : syafrizal.frozen@yahoo.com,
terima kasih sebelumnya.
mau nanya dong kk,, gmn caranya supaya text area tinymce bisa auto resize pas dbrowser??
Maaf , pnya sy juga blum bisa muncul tiny nya..padahal udah mengikuti tutorial.. email sy skatelvsskater@gmail.com makasih
Gan, kalau buat formnya pake form helper gmn tuh integrasiin tinymcenya?
rata2 pertanyaan’a sama tinymce’a ga muncul, buat yg udh berhasiil coment disini please,
yang berbeda dengan contoh di atas ap y?
minta emailnya, itu ada permasalahan translate code sama si wordpressnya..
sbelumnya, saya baru kenal dengan CI sekitar seminggu yang lalu..jadi mohon bantuannya ya..
ketika mau nyobain tinyMCE di CI, saya ga tau mesti mulai darimana, beruntuk ketemu tutor ini..
tapi setelah mencoba, masih belum berhasil mas…huhu..
yang keluar cuma textarea ma satu button..
ini email saya denydunkz@yahoo.com…
Sebelumnya saya minta maaf, ada kesalahan penulisan posting ini, jadi ada beberapa code yang salah diterjemahin sama wordpress, tunggu posting selanjutnya mengenai tinymce ya
mas minta bantuannya yaaa…
saya baru belajar buat website SIA pake CI tp saya mo tambahin TinyMCE di textarea tuk input komen nah saya bingung hrs mulai dr mana truz saya nemu artikel ni tp saya msh bingung tuk terapinnya…saya lihat koding nya cuma tuk di view aja yaaa ga da tuk controller n models nya…
oiya klo da skrip yg sudah jadinya krm ke email saya aja:
tommy_share2000@yahoo.com
nah ini yg saya cari … tolong krim fileny y mas ke joko.purwanto18@gmai.com
terima kasih bang atas info nya
masss, saya minta tlg bgt kirim ke email saya yah,,
reiyudha@hotmail.com
butuh bgt nih buat project cms saya deadline bya 3 minggu lg, mohon bntuannya trimkasih
tutorial yg di atas udh dicoba, tp editornya gk muncul
help me pleassee,,
masih binggung nih mas.. error memulu.. hiks,, bissa kirim file ya enggak
saptamh@ymail.com.. atur nuhun ya…
coding yg dikasih tau mas bean ladean sudah benar,,,
kesalahannya cuman pada tanda kutip yang di pakai di wordpress…
tanda kutip yg dipakai tidak terbaca oleh file php,,,
jadi sebaiknya tanda kutipnya di rename saja
“” –> untuk ini tidak perlu digunakan juga gpp,,,
yang penting source pada java scriptnya benar,,,
di examplena tinyMCE pun juga sudah benar,,
kmu smua juga bisa liat di cthnya tinyMCE langsung,,,
caranya buka file yang ada di dalam example,, filenya adalah full.php
Terima kasih ^_^
Saya sudah coba tapi masih saja tidak muncul,
bisa dikirm juga samplenya lewat email
naid3rut@gmail.com
mohon bantuanya newbi
mas aq minta juga?
aq kesulitan
mas ini email saya
panca.fathoni@yahoo.com
mas saya udah jalan ni tapi pas masukin smile icon kok gak muncul klo di tampilin smile iconnya gak muncul..
mkasih atas jawabannya…