Snippets

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

Navigation

Snippets tagged "ajax tinymce" Snippets tagged "ajax tinymce"

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 
(1 comment)

perform an Ajax in Place Rich editor combining inPlaceRichEditor and TinyMCE

A few days ago i found a problem about how to edit some term of a contract explicitly or with the WYSIWYG way. So I tried to googling and found this fancy example about how to cover my problem, that was inPlaceRichEditor. The first step, i tried to create A helper that could render the rich editor easily by modified the JavascriptHelper that is included in sf directory. You should notice that this stuff need Prototype 1.6, scriptaculous 1.8 and tinyMCE 2.1.3. put this code on your apps/lib/helper directory;

<?php
/*
 * AjaxEditInPlaceEditor.php
 * Helper for in place rich editor 
 */
function input_in_place_rich_editor_tag($name, $url, $editor_options = array())
  {
    $response = sfContext::getInstance()->getResponse();
    $response->addJavascript('/js/prototype');
    $response->addJavascript('/js/scriptaculous');
    $response->addJavascript('/js/controls');
    $response->addJavascript('/js/effects');
    $response->addJavascript('/js/tiny_mce/tiny_mce');
    $response->addJavascript('/js/inplacericheditor');
    $response->addJavascript('/js/tiny_mce_init');
 
 
    $editor_options = _convert_options($editor_options);
    $default_options = array('tag' => 'span', 'id' => '\''.$name.'_in_place_editor', 'class' => 'in_place_editor_field');
 
    return _in_place_rich_editor($name, $url, array_merge($default_options, $editor_options));
  }
function _in_place_rich_editor($field_id, $url, $options = array())
    {
      $javascript = "new Ajax.InPlaceRichEditor(";
 
      $javascript .= "'$field_id', ";
      $javascript .= "'" . url_for($url) . "'";
 
      $js_options = array();
 
      if (isset($options['tokens'])) $js_options['tokens'] = _array_or_string_for_javascript($options['tokens']);
 
      if (isset($options['cancel_text']))
      {
        $js_options['cancelText'] = "'".$options['cancel_text']."'";
      }
      if (isset($options['save_text']))
      {
        $js_options['okText'] = "'".$options['save_text']."'";
      }
      if (isset($options['external_control']))
      {
        $js_options['externalControl'] = "'".$options['external_control']."'";
      }
      if (isset($options['options']))
      {
        $js_options['ajaxOptions'] = $options['options'];
      }
      if (isset($options['with']))
      {
        $js_options['callback'] = "function(form, value) { return ".$options['with']." }";
      }
      if (isset($options['highlightcolor']))
      {
        $js_options['highlightcolor'] = "'".$options['highlightcolor']."'";
      }
      if (isset($options['highlightendcolor']))
      {
        $js_options['highlightendcolor'] = "'".$options['highlightendcolor']."'";
      }
      if (isset($options['loadTextURL']))
      {
        $js_options['loadTextURL'] =  "'".$options['loadTextURL']."'";
      }
 
 
      $javascript .= ', '._options_for_javascript($js_options);
      $javascript .= ');';
 
      return javascript_tag($javascript);
    }
 

As my experience,the inPlaceRichEditor need prototype.js,scriptaculous.js, inplacericheditor.js, controls.js and effects.js exists in the same directory (in /web/js directory). I don't know if you may be could cover this problem if u stay using alias or using sf_prototype_web_dir(/sf/prototype).

and then, here we go.. put this code on your template to perform the ajax in place rich editor

<?php use_helper('AjaxInPlaceRichEditor') ?>
<div id="term1">
your text ready to edit
</div>
<?php echo input_in_place_rich_editor_tag('term1', 'myModule/myAction',array('options'     =>"{method: 'post'}")) ?> 
 

that's it, very simple and very nice stuff.

PS:i'm sorry if my english sounds pretty awkward, cause i don't speak english well

by Imron Setio Widodo on 2008-02-03, tagged ajax  tinymce 
(1 comment)