![]() |
|
Snippets |
|
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.
In view.yml include TinyMCE and Prototype:
javascripts: [/sf/js/prototype/prototype.js, /js/tiny_mce/tiny_mce.js]
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 }); ') ?>
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.
Comments on this snippet
great! this works as expected. thank you! :)