的情景: 我需要加載一個外部頁面,並應用了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%">
<p>
This is some example text that you can edit inside the <strong>TinyMCE editor</strong>.
</p>
<p>
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.
</p>
</textarea>
+1分享解決方案 – Thariama
@Thariama謝謝:) – Neo