How to Integrate TinyMce with Redbox in 5 steps ?

By Administrator September 4, 2009

TinyMCE is a platform independent web based Javascript HTML WYSIWYG editor control. It has the ability to convert HTML TEXTAREA fields or other HTML elements to editor instances.

Redbox is a library that pops a modal box over a web page, using CSS and javascript, so that you can ask the user a question, or show them something important. The box can be loaded from content already on the page (but hidden), or it can be loaded via AJAX. The contents of the box can be replaced using AJAX, for multi-page forms, and it can be closed easily using a javascript link.

Here is the process for integrating Redbox and TinyMCE.

Step I:
Install required plugins:

– TinyMce(
– RedBox

Step II:
Include javascript files to layout:

  <%= include_tiny_mce_js %>
  <%= javascript_tag "initialize_editor();" %>

Now, add this javascript method which initializes the text editor. You can specify the options you want for your text editor here.


function  initialize_editor(){
    //mode:"textareas", // this is commented because we do not want to apply the editor to all the text area
     instances. Instead, we will use the class "mceEditor" to specify on which element we want to add the editor.
    theme_advanced_buttons1:"bold, italic, underline, strikethrough, | , undo, redo, link, unlink, image, | , bullist, numlist",

Step III:


Add editor class “mceEditor” to the text area where you want the editor to be added.

<%= f.text_area :details, :id => 'ta_id', :class => 'mceEditor' %>

Now, we need to create a tinymce editor control for the text area(‘ta_id’) on loading the popup so add this “execCommand” loads the tinyMCE in the textarea.

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%5Cjavascript%22%3E%0A%20%20tinyMCE.execCommand('mceAddControl'%2C%20true%2C%20%22ta_id%22)%3B%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />

Step IV:


When we submit our form and copy over the editor content to the text box it references. Tinymce provides a method ‘triggerSave’ that moves the contents from the editor to the form field. This method is automatically called by tinyMCE by adding a trigger on the forms submit method.

Save the content:

<%= f.submit 'Save', :class => 'primaryAction', :onclick => "tinyMCE.triggerSave(true,true);" %>

Step V:


Whenever we close our popup redbox we need to remove the tinymce editor control that we had added. Remove control on closing the redbox:

<%= link_to_close_redbox 'Close', {:onclick => "tinyMCE.execCommand('mceRemoveControl', true, 'ta_id'});"} %>

Works on: Firefox(1.5+), Safari and IE(7+)

For Internet Explorer we need to initialize the editor on loading the pop-up but for firefox we need to initalize editor on loading the main page. So we need modify our javascript

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%5Cjavascript%22%3E%0A%20%20if(navigator.appName%3D%3D%22Microsoft%20Internet%20Explorer%22)%0A%20%20%09initialize_editor()%3B%0A%20%20tinyMCE.execCommand('mceAddControl'%2C%20true%2C%20%22ta_id%22)%3B%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />

And so here we are ready to go in just five simple steps.

Refer here for more details.

Share this:

Leave a comment

Your email address will not be published. Required fields are marked *