Reloading TINYMCE 3.5 with AJAX and PHP

Question

I have a problem with updating the content of a WYSIWYG editor (TinyMCE 3.5) on a HTML web using PHP and AJAX.

the initial code of "news.php":

<script type="text/javascript">

tinyMCE.init({
    // General options
    mode : "textareas",
    theme : "advanced",
...
  });
</script>



...
      <select id="id_languages" name="id_languages" onchange="recibeid('loading_news_language.php', 'id_news=<?php echo $id_news;?>&id_languages='+document.getElementById('id_laguanges').value+'', '', 'load_news_language');">
        <?php

          $row_idiomas = get_languages();
          for($i = 0; $i<count($row_languages); $i++){
        ?>
        <option value="<?php echo $row_languages[$i]["id_languages"];?>"><?php echo $row_languages[$i]["name"];?>
        </option>
        <?php
          } //close bucle for
        ?>

    </select>
  </div>
 </div>

<div class="rowform"></div><!-- rowform -->
<div id="load_news_language">
      <?php include("loading_news_language.php");?>
</div>
...

when first loaded "loading_news_language.php" the Tiny editor works fine, but if the used the tag "selector" when click diferent language, dont load the editor again, only de content. I need to reload the editor.

The code of loading_new_language.php:

...

<textarea name="text" id ="text" rows="1" style="height: 300px;">
        <?php 
        if(isset($_POST["text"]))
        {echo $_POST["text"];}
        elseif (isset($_GET["id_news"])) 
        {echo $row_news_languages["text"]; }
        ?>
</textarea>
...

thank in advance all those who try to help.

Answer 1

That happens when you dynamically try to change the WYSIWYG Editor, it just breaks. What you need to do is, re-initiliase the Editor each time you change the content.

You need to remove the TinyMCE Editor, then "re-add" it again, with the new content, using the following function, where IDofYourEditor has to be replaced with the ID of your tinyMCE Editor.

tinyMCE.execCommand('mceRemoveControl',true,'IDofYourEditor');

And after loading your new content to the editor, you have to re-initilise the editor again, just like you did already in your example:

tinyMCE.init({
  // General options
  mode : "textareas",
  theme : "advanced",
  ...
});

This way your editor should work properly.