TinyMCE di Ruby on Rails

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.

1. Download TinyMCE terbaru
2. Extract dan copy direktori “jscripts/tiny_mce” ke struktur Rails kita yaitu “public/javascripts/tiny_mce”
3. Buat file “public/javascripts/mce_editor.js” yang berisi inisialisasi awal TinyMCE. Contoh sederhana:
   tinyMCE.init({
theme:"advanced",
mode:"textareas",
plugins : "safari"
});Contoh inisialisasi theme awal lain ada di sini.
4. 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
5. 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 %>

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

1. Usahakan kode dipanggil di halaman load awal (bukan partial render, file _form misalnya).
2. 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 %>


Advertisements