TinyMCE & Fancybox - editor won't work on second view
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() {
开发者_Go百科//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>
I'm using fancybox 2.0
$("#notesbtn").fancybox({
beforeShow: function () { tinymce.execCommand('mceToggleEditor', false, 'elm1'); },
beforeClose: function () { tinymce.EditorManager.execCommand('mceRemoveControl', true, 'elm1'); }
});
You need to shut down tinymce correctly before closing the fancybox in order to be able to open the tinymce editor a second time. Use this to shut it down correctly
tinymce.EditorManager.execCommand('mceRemoveControl',true, editor_id);
I had this same problem in a project that I've been working on for a while now, and I tried a couple different ways to fix it over the last couple months, but yesterday I finally was able to address it in a manner that seems to be working well.
The key, is that instead of using the jQuery driven version of TinyMCE, you need to use the normal javascript version, with the mode configuration option set to none. This should be initialized as soon as the page loads (instead of at the time when you want to load the TinyMCE in, as you are doing in your example). Then, similar to the technique suggested in @user1116745's answer, you use FancyBox's callbacks to initialize the TinyMCE, once the FancyBox has finished loading like so:
(this assumes that your text area has an id of text_form)
$(function(){
$('#content_objects_edit').fancybox({
onComplete: function () { tinyMCE.execCommand('mceAddControl', false, 'text_form'); },
onCleanup: function () {
tinyMCE.execCommand('mceFocus', false, 'text_form');
tinyMCE.execCommand('mceRemoveControl', false, 'text_form');
}
});
})
As taken from FancyBox's API, here are when these two callbacks fire:
onComplete - Will be called once the content is displayed
onCleanup - Will be called just before closing
For more information on what the tinyMCE.execCommand does, see the docs. Essentially it converts a textarea to a tinyMCE instance on the spot.
This did the trick for me. Haven't had any problems with the grayed out screen you mention since I implemented this method.
For tinyMCE 4.X Add tinyMCE.remove() in your fancybox beforeClose callback:
beforeClose : function() {
tinyMCE.remove();
}
see: Remove TinyMCE control and re-add
this work for me for fancybox 2.1.5 I guess
$(".fancybox").fancybox({
afterLoad: function () {
tinymce.remove();
setTimeout(function(){tinymce.init({selector:'textarea'});},500);
}
});
user this code from jquery.tinymce.js:
'onComplete': function() {
$('textarea.tinymce').tinymce({
...
})
...
加载中,请稍侯......
精彩评论