Usage

Load the required javascript files

You will need to load the following javascript files and in the right order to get InPlaceRichEditor to works fine

<script src="/javascripts/prototype.js" type="text/javascript"></script>
<script src="/javascripts/effects.js" type="text/javascript"></script>
<script src="/javascripts/controls.js" type="text/javascript"></script>
<script src="/javascripts/patch_inplaceeditor_1-8-2.js" type="text/javascript"></script>
<script src="/javascripts/patch_inplaceeditor_editonblank_1-8-2.js" type="text/javascript"></script>
<script src="/javascripts/tiny_mce/tiny_mce.js" type="text/javascript"></script>
<script src="/javascripts/tiny_mce_init.js" type="text/javascript"></script>
<script src="/javascripts/inplacericheditor.js" type="text/javascript"></script>

Download the required libraries

Initialize TinyMCE

I recommend initializing TinyMCE in the header, that will make the page load a bit longer but will give a better response for editing.

The initialization now supports multiple initializations, so you can have advanced and simple theme used in the same page doing like

In the file : /javascripts/tiny_mce_init.js

  var tinymce_options = {
    mode : "textareas",
    theme : "simple"
  };

  var tinymce_advanced_options = {
    mode : "textareas",
    theme : "advanced"
  };

  tinyMCE.init(tinymce_advanced_options);
  tinyMCE.init(tinymce_options);

NOTICE: It's important to take care of the initialization order as the last one will be used by default for the normal editors.

Call InPlaceRichEditor

You can call InPlaceRichEditor directly inline like shown under or by calling it in your own Javascript scripts.

  <h1 id="tobeedited">To be edited w/ simple theme</h1>
  <script>
  // <![CDATA[
    new Ajax.InPlaceRichEditor($('tobeedited'), 'YOUR_UPDATE_URL', {}, tinymce_options);
  // ]]>
  </script>

  <h1 id="tobeeditedadvanced">To be edited w/ advanced theme</h1>
  <script>
  // <![CDATA[
    new Ajax.InPlaceRichEditor($('tobeeditedadvanced'), 'YOUR_UPDATE_URL', {}, tinymce_advanced_options);
  // ]]>
  </script>

NOTICE: You need to replace YOUR_UPDATE_URL by the url where the HTML content will be sent.

For testing the installation as PHP users, you can create a php file "update_test.php" that would just contain : <?= $_POST['value']; ?> (Thanks Etienne DUBARRY for tips)

Security notice

DO NEVER FORGET to clean code sent by InPlaceRichEditor, javascript cleaning is wonderful but purely useless when we speak about security. Railers may consider using white_list but you can also use what ever way you like to keep yourself secure.