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 %>

13 thoughts on “TinyMCE di Ruby on Rails

  1. 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. ^^;

  2. 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

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s