I am working on something like this:
On a webpage, there is an article wrapped in a DIV, an Edit button. When a user click on the Edit button, insert an textarea via javascript, load the html of the DIV into the textarea, load and initial tinymce. When the user click on the Save button, save and update the article via ajax, and destroy tinymce completely.
The problem is that, I failed to destroy tinymce. Here is the doc of the destroy method.
I am using the jQuery version of tinymce, the lastest V3.2.2
Here is the sample code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="../js/tinymce/jquery.tinymce.js"></script>
<script type="text/javascript">
$(function() {
$('button.load').click(loadTinyMCE);
$('button.destory').click(destoryTinyMCE);
});
function loadTinyMCE() {
$('textarea').tinymce({
script_url : '../js/tinymce/tiny_mce.js'
});
}
function destoryTinyMCE() {
$('textarea').tinymce().destroy();
}
</script>
</head>
<body>
<textarea>abc</textarea>
<button type="button" class="load">Load TinyMCE</button>
<button type="button" class="destory">Destory TinyMCE</button>
</body>
</html>