I've added TinyMCE to my project, and am using it on a text area which pops up in a fancybox. The first time I action it, it works fine, but if I then close it and try to open it again, it doesn't let me type in the box. It looks okay, just that the text area is kind of greyed out, and won't accept input. If I click any of the buttons (bold, italic, justify, font selection etc.), the console gives the error "j is null".
I've found some similar problems on the web, but couldn't find anyone with a similar set up to mine, so I'm confused. I think the problem may be that I'm trying to add a new TinyMCE instance every time the fancybox is shown, and then I need to destroy it afterwards, before re-initialising it, maybe? But I'm not sure how to destroy it, or even if that's what I need to do.
Here's my code:
<head>...</head>
<body>
<script type="text/javascript">
function tinyMCE_setup() {
tinyMCE.init({
mode : "textareas",
theme : "advanced",
plugins : "pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",
theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,fontselect,fontsizeselect,forecolor",
theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,undo,redo,|,link,unlink,code",
theme_advanced_buttons3 : "",
theme_advanced_buttons4 : "",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "center",
//theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : true
});
}
function tinyMCE_remove() {
//tinyMCE.destroy();
}
</script>
... some html ...
<!-- Text -->
<div style="display:none">
<div id="addtext" class="addcontent">
<p class="headline bg_text">add text or caption</p>
<form id="addText" name="addText" action="add_text.php" method="post" onSubmit="return checkAddText()">
<label>enter your caption or text here</label>
<textarea id="text" name="text" rows="10" style="clear: both; margin-bottom: 14px; margin-top: 5px; width: 466px"></textarea>
<input type="image" name="submit" id="imageField2" src="images/site/button_text_submit.gif" onMouseOver="this.src='images/site/button_text_submit_over.gif'" onMouseOut="this.src='images/site/button_text_submit.gif'"/>
</form>
</div>
</div>
... more html ...
</body>
</html>
<script>
$(document).ready(function() {
$("a#link_addtext").attr("href", "#addtext");
$('a#link_addtext').fancybox({
'hideOnContentClick': false,
'padding' : 0,
'overlayOpacity' : 0.1,
'onComplete': function(){
tinyMCE_setup();
}
});
... other javascript ..
}
</script>
