TinyMCE & Fancybox - editor won't work on second view

Question

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>

score 4 · Answer 1 · answered Dec 26 '11 at 20:38

4

I'm using fancybox 2.0

$("#notesbtn").fancybox({ 
    beforeShow: function () { tinymce.execCommand('mceToggleEditor', false, 'elm1'); },
    beforeClose: function () { tinymce.EditorManager.execCommand('mceRemoveControl', true, 'elm1'); }
});

answered Dec 26 '11 at 20:38

Mickey

55
7

Fancybox 2.0 is using a license that is not suitable for software. Additionally it's might violate jQuery's own license, which if it does, would render the whole package unusable. – hakre Dec 26 '11 at 21:08
1

I'm using fancybox v1, and I managed to use the callbacks in Fancybox 1 to do it in very similar fashion. See the `onComplete` and `onCleanup` callbacks for Fancybox V1: `$('#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'); } });` – Batkins Aug 10 '12 at 21:05

score 1 · Answer 2 · answered Aug 27 '12 at 19:59

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.

score 1 · Answer 3 · edited May 23 '17 at 11:55

1

For tinyMCE 4.X Add tinyMCE.remove() in your fancybox beforeClose callback:

beforeClose : function() {
  tinyMCE.remove();
}

see: Remove TinyMCE control and re-add

edited May 23 '17 at 11:55

Community

1
1

answered Jul 03 '14 at 09:31

bananaCute

433
5
17

Thaaaank youu dear.I try to solve my problem in 2 days but now with your answer I solve this. Thx. – Milad Ghiravani Nov 07 '15 at 13:18

score 1 · Answer 4 · answered Dec 26 '15 at 18:52

1

this work for me for fancybox 2.1.5 I guess

$(".fancybox").fancybox({
    afterLoad: function () {
        tinymce.remove();
        setTimeout(function(){tinymce.init({selector:'textarea'});},500);
    }
});

answered Dec 26 '15 at 18:52

Wasim A.

9,660
22
90
120

score 1 · Accepted Answer · answered May 10 '11 at 18:16

1

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);

answered May 10 '11 at 18:16

Thariama

50,002
13
138
166

1

the editor_id is "content" by default, but if your textarea got an id tinymce will assign this id as editor_id! – Thariama May 11 '11 at 10:52

score 0 · Answer 6 · answered May 10 '11 at 14:55

0

user this code from jquery.tinymce.js:

'onComplete': function() {
    $('textarea.tinymce').tinymce({
        ...
    })
    ...

answered May 10 '11 at 14:55

Mohammad Ali Akbari

10,345
11
44
62

Thanks, but that didn't work - in the console window I get "$("textarea.tinymce").tinymce is not a function" and the editor doesn't appear - I just get a normal textarea. – Sharon May 10 '11 at 15:04
no, you should download and add it to your html source, http://tinymce.moxiecode.com/tryit/jquery_plugin.php – Mohammad Ali Akbari May 10 '11 at 15:07
Thanks, but I don't understand what you mean. What do I need to download? I already have tiny_mce.js and am linking to that. Do I need to download something else? – Sharon May 10 '11 at 15:12
use jquery version of tinymce instead of using tinyMCE_setup function – Mohammad Ali Akbari May 10 '11 at 16:05
do you see this:http://stackoverflow.com/questions/5760532/integrating-fancybox-and-tinymce-problem – Mohammad Ali Akbari May 10 '11 at 16:08

TinyMCE & Fancybox - editor won't work on second view

6 Answers6

Linked