Xajax 0.2: Tips and Tricks: tinyMCE

Many people ask how to use tinyMCE with xajax. Its simple! First set tinyMCE mode to "none"

<script type="text/javascript">
tinyMCE.init({mode : "none"});
</script>

Start things off in your PHP/xajax/server function to create a new textarea, and convert it to a tinyMCE editor

$objResponse->addAssign("div","innerHTML","<textarea id='foo' name='foo'>Content</textarea>");
$objResponse->addScript("tinyMCE.addMCEControl(xajax.$('foo'),'MCEControlID');");

or, if you have troubles with $objResponse->Script in xajax 0.5 you could try using

$objResponse->Call('setTimeOut',"tinyMCE.addMCEControl(xajax.$('foo'),'MCEControlID')",'100');

Then when it comes time to submit your form, dont forget to tell all tinyMCE textareas to put their edited code into the textarea

<script type="text/javascript">
 tinyMCE.triggerSave(false, false);
xajax_submit_form(xajax.$('formId'));
</script>

To save memory, you can remove the instance of the editor from the server end. This needs to be done before you change the HTML on the webpage.

$objResponse->addScript("tinyMCE.removeMCEControl('MCEControlID');");

An alternative method to clear all existing tinyMCE instances:

<script type="text/javascript">

function clear_tiny_instances () {

    for (var n in tinyMCE.instances) {
            if (tinyMCE.isInstance(tinyMCE.instances[n])) {
                    //for debugging the editorIDs    
                                //alert(tinyMCE.instances[n].editorId);
                tinyMCE.removeMCEControl(tinyMCE.instances[n].editorId);
            }
        }            
}

</script>

If you don't want to use a form and/or textarea's, it is possible to use any element. Give the element an id, create an MCEControl using the above code and it will work. To retrieve the edited content use

<script type="text/javascript">
var content=tinyMCE.getContent();
</script>

If you want to change the content of an existing editor you can use the following javascript code. Place this inside of an xajaxResponse addScript function to use from xajax.

tinyMCE.selectedInstance = tinyMCE.instances[tinyMCE.getEditorId('id_of_element')];
tinyMCE.setContent("New HTML to set to");