Setelah agak bermasalah dengan editor teks WYSIWYG FCKEditor (dulu memilih ini karena plugins Ruby on Railsnya udah ada duluan), akhirnya beberapa project Ruby on Rails saya switch ke TinyMCE. Kali ini didokumentasiin siapa tahu lupa, soalnya karena berbagai pertimbangan lebih memilih install manual daripada menggunakan plugins Rails. Untuk instalasi menggunakan plugins Rails bisa disimak di wikinya Rails.
- Download TinyMCE terbaru
- Extract dan copy direktori “jscripts/tiny_mce” ke struktur Rails kita yaitu “public/javascripts/tiny_mce”
- Buat file “public/javascripts/mce_editor.js” yang berisi inisialisasi awal TinyMCE. Contoh sederhana:
tinyMCE.init({
Contoh inisialisasi theme awal lain ada di sini.
theme:"advanced",
mode:"textareas",
plugins : "safari"
}); - Tambahkan method berikut di “app/helpers/application_helper.rb” :
def use_tinymce
@content_for_tinymce = ""
content_for :tinymce do
javascript_include_tag "tiny_mce/tiny_mce"
end
@content_for_tinymce_init = ""
content_for :tinymce_init do
javascript_include_tag "mce_editor"
end
end - Tambahkan handling pemanggilan javascript TinyMCE (supaya hanya diload saat dibutuhkan) di file “app/views/layouts/application.rhtml” sesuai urutan:
<%= javascript_include_tag "prototype" %>
<%= yield :tinymce %>
<%= javascript_include_tag "scriptaculous" %>
<%= javascript_include_tag "effects" %>
<%= javascript_include_tag "controls" %>
<%= yield :tinymce_init %>
- Sisanya tinggal lakukan pemanggilan di form yang dibutuhkan:
<% use_tinymce -%>
<%= textarea_tag :foo, :bar, ... :class => "mce-editor" %>
Bagaimana jika formnya adalah remote form / AJAX? Kebetulan saya banyak menggunakan remote form (hasil generate Toombila Scaffold). Jadi si textarea tidak dirender saat halaman diload, dia di render setelah halaman tampil lalu ada tombol “Add New Entry” misalnya. Ada beberapa bagian yang harus ditambahkan:
- Usahakan kode dipanggil di halaman load awal (bukan partial render, file _form misalnya).
- Di bagian partial form yang akan dipanggil, tambahkan trigger yang akan menambahkan TinyMCE ke DOM Tree dokumen kita saat form tersebut dirender. Taruh di setelah textarea :
<%= form_remote_tag :url => {:action => 'edit_page', :id => @page},
:before => "tinyMCE.triggerSave(true,true)" %>
<b>Page Content:</b><br />
<%= text_area :page, :content, :rows => 15, :cols => 150 %>
<br /><br />
<%= submit_tag "Update" %>
<script type="text/javascript">
//<![CDATA[
tinyMCE.execCommand('mceAddControl', true, 'page_content');
//]]>
</script>
<%= end_form_tag %>
owww… chicken ruby..
Mulai tumpul dan pikun bay, kudu ditulis
ah tak ada komik… >_>
kok sepi ya…
kok ngak ada gambarnya? tumben? π
Knapa gak pake fckeditor dik? Gue yg bikin pusing tinymce gak ada filemanagernya, musti bayar lagi.
:(( minta ayam :(( :(( :(( :(( :(( it’s bloody boring without that chicken :((
saya rindu sama ayam.. tolong kasi gambar ayam…
akhirnya chicken rubynya keluar juga, sodara-sodara sebangsa dan setanah air
Wah, Ruby on Rails ya. π
Maap OOT mas, tapi WYSIWYG editor itu paling bagus/paling enak apa ya, diantara TinyMCE, FCKEdtor, dan nicEdit? nicEdit kayaknya lite, tapi entah kenapa kayaknya kurang. π
Maap OOT. ^^;
saya mau belajar rubby aahh …
WYSIWYG editor yg paling enak tentu saja…
Microsoft Word :))
oh ternyata si ayam pernah bahas tinyMCE π
pengen seperti yang di stackoverflow itu keren. eh tapi itu bukan WYSIWYG editor ya?
Markup editor mungkin lebih tepat