Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
290 views
in Technique[技术] by (71.8m points)

php - 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() {
   //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>
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

I'm using fancybox 2.0

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

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...