Using the great libraries Prototype 1.6, Script.Aculo.Us 1.8 and TinyMCE 3.2, IPRE provide a really easy way to implement an in place AJAX-powered editor using WYSIWYG.

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the “Software”), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

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>

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.

To be edited w/ simple theme

  <script>
  // < ![CDATA[
    new Ajax.InPlaceRichEditor($('tobeedited'), 'YOUR_UPDATE_URL', {}, tinymce_options);
  // ]]>
  </script>

To be edited w/ advanced theme

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

Demo: http://inplacericheditor.box.re/demos

Download: http://inplacericheditor.box.re/download/InPlaceRichEditor_1.3.1.zip

Source: http://inplacericheditor.box.re/

Related Listings:

1. Cross-Browser Rich Text Editor (RTE) The Cross-Browser Rich Text Editor (RTE) is based on the...
2. sLedit – Inplace editor for mootools I’ve had a lot of requests to send people mooEdit....
3. MooRTE – Rich Text Editor Control using MooTools MooRTE is a rich text editor control using MooTools JavaScript...
4. Damn Small Rich Text Editor The codes I provide here are part of the Forms...
5. Ajax Inline Online Editor for Articles This is an ajax inline editor that will allow you...

Do you like this post?

Email: