AJAX and dynamic tinyMCE
for one appliaction handgestrickt needed a good, reliable WYSIWYG- editor. we decided for tinyMCE, because of the very good integration and customization. before we usually used FCKeditor, but this one is always painful to integrate. the problem we had was to integrate the WYSIWYG- editor dynamically and on demand. we are loading forms after user-actions, then need the editor on one textarea. the documentation includes all of the information required, but finding it was some work. so here is the way it worked for us.
first integrate it into the head of your initial page:
<head>
<script src="tiny_mce/tiny_mce.js" language="JavaScript" type="text/javascript"></script>
<script>
tinyMCE.init({
mode: 'exact',
elements: 'the_id_of_the_textarea',
theme: 'advanced',
theme_advanced_buttons1: 'newdocument,separator,undo,redo,separator,cut,copy,paste,separator,bold,italic,underline,separator,link,unlink,separator,bullist,numlist',
theme_advanced_buttons2: '',
theme_advanced_buttons3: '',
theme_advanced_toolbar_location: 'top',
theme_advanced_toolbar_align: 'left'
});
</script>
</head>this integrates the editor and initializes one instance. it is possible to use multiple instances by calling the tinyMCE.init()-method several times with different element-ids.
now we do the dynamic integration in our AJAX-application:
tinyMCE.execCommand('mceAddControl',true,'the_id_of_the_textarea');this activates the editor on the textarea with the given id.
tinyMCE.triggerSave();
tinyMCE.execCommand('mceRemoveControl',true,'the_id_of_the_textarea');this writes the content of the editor back into the textarea, then removes the editor from the textarea. if you have a submit button in your form, the tinyMCE.triggerSave()-method is called automatically. now you can access the textarea easily by $F() or the forms-object and read out the HTML.
