1. 首頁
  2. 問答
  3. TinyMCE的不initilizing上jQueryUI的模態對話框

TinyMCE的不initilizing上jQueryUI的模態對話框

2012-11-15 26 views
2

的情景： 我需要加載一個外部頁面，並應用了tinyMCE到文本區TinyMCE的不initilizing上jQueryUI的模態對話框

的問題： 首先點擊它的工作原理，但是當你關閉對話框，再次單擊該按鈕不會搞了tinyMCE

驗證碼：test.html的

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Untitled Document</title> 
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/themes/base/jquery-ui.css" id="theme"> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js" type="text/javascript"></script> 
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script> 
<script type="text/javascript" src="js/tiny_mce/jquery.tinymce.js"></script> 

<script type="text/javascript"> 
$(function(){ 
    $('.newbutton').button({icons: {primary: "ui-icon-plusthick"}}).click(function(e){ 
     e.preventDefault(); 
//  $('body').css({'overflow' : 'hidden'}); 
     $('#newform').dialog({ 
      show: "puff", 
      hide: "puff", 
      resizable: false, 
      height: 500, 
      width: 800, 
      modal: true, 
      beforeClose: function(){ 
       if ($("textarea.tinymce").length) { 
        $('textarea.tinymce').tinymce().remove(); 
       }; 
       $(this).html(" "); 

      }, 
      close: function(){ 
//    $('body').css({'overflow' : 'auto'}); 
       $(this).html(" "); 
//    $('#newform').dialog('destroy'); 
      }, 
      open: function(){ 
       $('#newform').load("test2.html", function(){ 
        $('textarea.tinymce').tinymce({ 
         // Location of TinyMCE script 
         script_url : 'js/tiny_mce/tiny_mce.js', 

         // General options 
         theme : "advanced", 
         plugins : "autolink,lists,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,advlist", 

         // Theme options 
         theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect", 
         theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor", 
         theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen", 
         theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak", 
         theme_advanced_toolbar_location : "top", 
         theme_advanced_toolbar_align : "left", 
         theme_advanced_statusbar_location : "bottom", 
         theme_advanced_resizing : true 

        }); 
       }); 
      } 
     });  

    }); 

}); 
</script> 

</head> 

<body> 
<button id="newbutton" class="newbutton">New</button> 
<div id="newform" class="hide" title="Title"><!-- data loaded dynamically--></div> 

</body> 
</html>

驗證碼：test2.html

<textarea class="tinymce" id="elm1" name="elm1" rows="15" cols="80" style="width: 80%"> 
       &lt;p&gt; 
        This is some example text that you can edit inside the &lt;strong&gt;TinyMCE editor&lt;/strong&gt;. 
       &lt;/p&gt; 
       &lt;p&gt; 
       Nam nisi elit, cursus in rhoncus sit amet, pulvinar laoreet leo. Nam sed lectus quam, ut sagittis tellus. Quisque dignissim mauris a augue rutrum tempor. Donec vitae purus nec massa vestibulum ornare sit amet id tellus. Nunc quam mauris, fermentum nec lacinia eget, sollicitudin nec ante. Aliquam molestie volutpat dapibus. Nunc interdum viverra sodales. Morbi laoreet pulvinar gravida. Quisque ut turpis sagittis nunc accumsan vehicula. Duis elementum congue ultrices. Cras faucibus feugiat arcu quis lacinia. In hac habitasse platea dictumst. Pellentesque fermentum magna sit amet tellus varius ullamcorper. Vestibulum at urna augue, eget varius neque. Fusce facilisis venenatis dapibus. Integer non sem at arcu euismod tempor nec sed nisl. Morbi ultricies, mauris ut ultricies adipiscing, felis odio condimentum massa, et luctus est nunc nec eros. 
       &lt;/p&gt; 
      </textarea>

來源

2012-11-15 Neo

回答

3

大量的試驗和錯誤之後，我發現這個問題是因爲對話框有一個顯示和隱藏效果！刪除這些使系統正常工作，所以解決這個問題的方法是在tinymce啓動時顯示加載屏幕。

代碼的test.html： 無標題文檔 

<script type="text/javascript"> 
$(function(){ 
    $('.newbutton').button({icons: {primary: "ui-icon-plusthick"}}).click(function(e){ 
     e.preventDefault(); 
     $('body').css({'overflow' : 'hidden'}); 
     $('#newform').dialog({ 
      show: "puff", 
      hide: "puff", 
      resizable: false, 
      height: 500, 
      width: 800, 
      modal: true, 
      beforeClose: function(){ 
       if ($("textarea.tinymce").length) { 
        $('textarea.tinymce').tinymce().remove(); 
       }; 
       $(this).html(" "); 
      }, 
      close: function(){ 
       $('body').css({'overflow' : 'auto'}); 
       $(this).html(" "); 
       $('#newform').dialog('destroy'); 
      }, 
      open: function(){ 
       $('#newform').load("test2.html", function(){ 
        $(this).css({"overflow": "hidden"}); 
        $('.tinymceloader').css({"position": "absolute", "height": $(this).height()-16, "width": $(this).width() - 32, "z-index": 200, "background-color": "#ffffff"}); 
        setTimeout("inittinymce(); $(this).css({\"overflow\": \"auto\"});", 500); 
       }); 
      } 
     });  

    }); 

}); 
function inittinymce(){ 
    $('textarea.tinymce').tinymce({ 
         // Location of TinyMCE script 
         script_url : 'js/tiny_mce/tiny_mce.js', 

         // General options 
         theme : "advanced", 
         plugins : "autolink,lists,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,advlist", 

         // Theme options 
         theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect", 
         theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor", 
         theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen", 
         theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak", 
         theme_advanced_toolbar_location : "top", 
         theme_advanced_toolbar_align : "left", 
         theme_advanced_statusbar_location : "bottom", 
         theme_advanced_resizing : true 

        }); 
    setTimeout("$('.tinymceloader').hide();", 1000); 

} 
</script> 

</head> 

<body> 
<button id="newbutton" class="newbutton">New</button> 
<div id="newform" class="hide" title="Title"><!-- data loaded dynamically--></div> 

</body> 
</html>

代碼test2.html：

<div class="tinymceloader">Loading</div> 
<textarea class="tinymce" id="elm1" name="elm1" rows="15" cols="80" style="width: 80%"> 
       &lt;p&gt; 
        This is some example text that you can edit inside the &lt;strong&gt;TinyMCE editor&lt;/strong&gt;. 
       &lt;/p&gt; 
       &lt;p&gt; 
       Nam nisi elit, cursus in rhoncus sit amet, pulvinar laoreet leo. Nam sed lectus quam, ut sagittis tellus. Quisque dignissim mauris a augue rutrum tempor. Donec vitae purus nec massa vestibulum ornare sit amet id tellus. Nunc quam mauris, fermentum nec lacinia eget, sollicitudin nec ante. Aliquam molestie volutpat dapibus. Nunc interdum viverra sodales. Morbi laoreet pulvinar gravida. Quisque ut turpis sagittis nunc accumsan vehicula. Duis elementum congue ultrices. Cras faucibus feugiat arcu quis lacinia. In hac habitasse platea dictumst. Pellentesque fermentum magna sit amet tellus varius ullamcorper. Vestibulum at urna augue, eget varius neque. Fusce facilisis venenatis dapibus. Integer non sem at arcu euismod tempor nec sed nisl. Morbi ultricies, mauris ut ultricies adipiscing, felis odio condimentum massa, et luctus est nunc nec eros. 
       &lt;/p&gt; 
      </textarea>

來源

2012-11-15 16:24:05 Neo

+1

+1分享解決方案 – Thariama

+0

@Thariama謝謝:) – Neo

2

當您關閉對話 - 你需要過關閉TinyMCE的實例：

tinymce.execCommand('mceRemoveControl',true,'your_editor_id');

來源

2012-11-15 15:35:18 Thariama

+0

試過，但沒有奏效 – Neo

1

我有這個問題就迎刃而解了。

function AddTinyMCE() { 
    tinymce.init({ 
     selector: "textarea", 
     theme: "modern", 
     height: 180, 
     plugins: [ 
     "advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker", 
     "searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking", 
     "save table contextmenu directionality emoticons template paste textcolor" 
     ], 
      content_css: "css/content.css", 
      toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | l  ink image | preview | forecolor backcolor", 
      style_formats: [ 
      { title: 'Bold text', inline: 'b' }, 
      { title: 'Red text', inline: 'span', styles: { color: '#ff0000'} }, 
      { title: 'Red header', block: 'h1', styles: { color: '#ff0000'} }, 
      { title: 'Example 1', inline: 'span', classes: 'example1' }, 
      { title: 'Example 2', inline: 'span', classes: 'example2' }, 
      { title: 'Table styles' }, 
      { title: 'Table row 1', selector: 'tr', classes: 'tablerow1' } 
     ] 
    }); 
}

，並調用它，如下所示：

$("#dialog-Edit").dialog({ 
     autoOpen: true, 
     modal: true, 
     height: 600, 
     width: 700, 
     title: "Example", 
     buttons: [{ 
      text: "Save", 
      title: "Save", 
      tabIndex: -1, 
      click: function() { 

      } 
     }, 
     { 
      text: "Cancel", 
      title: "Cancel", 
      tabIndex: -1, 
      click: function() { 
       $(this).dialog("close"); 
      } 
     }], 
     open: function() { 
      AddTinyMCE(); 

     }, 
     close: function() { 
      $(this).dialog("destroy"); 
     } 
    });

來源

2013-06-26 02:20:42

0

如果使用的是原始事件破壞($(this).dialog("destroy");)，問題已經解決了它刪除TinyMCE的

來源

2013-07-19 10:19:42

相關問題

 相關問題