Snippets

Create an account or login to be able to add, comment and rate snippets.

Navigation

TinyMCE in AJAX call

If you want to use a TinyMCE editor in a form called by ajax, you have to make some additional changes to the code. It's not complicated.

Include TinyMCE

In view.yml include TinyMCE and Prototype:

  javascripts:    [/sf/js/prototype/prototype.js, /js/tiny_mce/tiny_mce.js]

Init TinyMCE

In your main decoration template include the javascript code bellow (best at the end of the file). In most cases this code will be the layout.php.

<?php echo javascript_tag('
var activatedAreas = new Array();   
 
function setTextareaToTinyMCE(sEditorID) 
{
  var oEditor = document.getElementById(sEditorID);
    if(oEditor) 
  {
    if(activatedAreas[sEditorID] == true)
      unsetTextareaToTinyMCE(sEditorID);
    try {
      activatedAreas[sEditorID] = true;
      tinyMCE.execCommand("mceAddControl", true, sEditorID);                    
    }
    catch(e)
    {
      alert("Error activating element " + sEditorID + "\n" + e);
    }
  }
}
 
function unsetTextareaToTinyMCE(sEditorID) 
{
  var oEditor = document.getElementById(sEditorID);
  if(oEditor && (activatedAreas[sEditorID] == true)) 
  {
    try 
    {
      tinyMCE.execCommand("mceRemoveControl", true, sEditorID);
      activatedAreas[sEditorID] = false;
    }
    catch(e)
    {
      alert("Error deactivating element " + sEditorID + "\n" + e);
    }
  }
}
 
function tinymceDeactivate()
{
  try {
    tinyMCE.triggerSave(true,true);         
  }
  catch(e)
  {
    alert("Error saving form\n" + e);
  }
 
  for(var i in activatedAreas)
  {
    if(activatedAreas[i] == true) 
    {
      unsetTextareaToTinyMCE(i);
    }
  }
}
 
function submitForm(formId)
{
 if($(formId).onsubmit())
 {
    $(formId).submit();
 }
}
 
tinyMCE.init({
  theme : "advanced",
  language : "en",
  mode : "exact",
  relative_urls : false,
  debug : false,  
  valid_elements : "*[*]",
  height:"100%",
  width:"100%",
  theme_advanced_resize_horizontal : false,
  theme_advanced_resizing : true,
  auto_reset_designmode : true
});
') ?>

Action AJAX call

And now finally in the action template which is called by ajax, use the code fragment bellow. The link_to_remote call has to have script => true.

Form:

  <form id="form_id">
 
    ......
 
    <?php echo textarea_tag('article','article','size=10x30'); ?>
 
    ......
 
  </form>

At the end of the action template (e. g. editSuccess.php):

  <a class="button save" alt="SAVE" href="#" onclick="tinymceDeactivate();submitForm('form_id'); return false">SAVE</a>  
  <?php echo javascript_tag(' 
    setTextareaToTinyMCE("article");  
  ') ?>

The important thing was to deactivate the tinymce editor on textarea before submitting the form, otherwise there were errors after re-appearing of the form.

by František Tröster on 2006-08-31, tagged ajax  tinymce 

Comments on this snippet

gravatar icon
#1 tommy on 2007-08-18 at 07:24

great! this works as expected. thank you! :)

You need to create an account or log in to post a comment or rate this snippet.