Xóa điều khiển TinyMCE và thêm lại

Question

Tôi có ứng dụng js không bao giờ tải lại trang, vì vậy khi điều hướng, tôi cần xóa hoàn toàn các điều khiển TinyMCE và sau đó tôi muốn khởi tạo lại khi điều hướng đến khu vực cần đến. Tôi đã thử câu trả lời được chấp nhận cho câu hỏi này, nhưng dường như không làm gì cả.

How do i remove tinyMCE and then re-add it?

tinymce.EditorManager.execCommand('mceRemoveControl',true, editor_id); 

và implimentation cụ thể của tôi:

//if I throw an alert here, it does get called, so I know it's not null 
    if (tinyMCE.getInstanceById("main-text")) 
      tinyMCE.EditorManager.execCommand('mceRemoveControl', true, "main-text"); 

Tôi cũng đã cố gắng

tinyMCE.remove(tinyMCE.getInstanceById("main-text")); 
    // AND 
    tinyMCE.remove("main-text"); 

Tôi biết rằng tuyên bố đó được thực thi khi tôi đặt một cảnh báo trong điều kiện. .. Tôi biết đó là ID chính xác-- Có thứ gì khác được chôn trong API tha không Tôi đang mất tích? Đây không phải là phiên bản jQuery. Trình chỉnh sửa vẫn tồn tại sau khi xóa nỗ lực và thậm chí tôi còn nhận được một ID mới có cùng ID nếu tôi khởi động lại bằng cách điều hướng trở lại trạng thái với biểu mẫu.

EDIT: giải pháp bên dưới không hoạt động trong phiên bản hiện tại 3.5b3, chỉ trong 3.4.9. Có lỗi trong đó 't is undefined'

Chỉ trong trường hợp, đây là phần có liên quan của DOM sau init.

<textarea id="main-text" style="display: none;" aria-hidden="true"></textarea> 
<span id="main-text_parent" class="mceEditor defaultSkin" role="application" aria-labelledby="main-text_voice" style="display: inherit;"> 
<span id="main-text_voice" class="mceVoiceLabel" style="display:none;">Rich Text Area</span> 
<table id="main-text_tbl" class="mceLayout" cellspacing="0" cellpadding="0" role="presentation" style="width: 100%; height: 400px;"> 
<tbody> 
<tr class="mceFirst" role="presentation"> 
<td class="mceToolbar mceLeft mceFirst mceLast" role="presentation"> 
<div id="main-text_toolbargroup" aria-labelledby="main-text_toolbargroup_voice" role="group" tabindex="-1"> 
<span role="application"> 
</div> 
<a onfocus="tinyMCE.getInstanceById('main-text').focus();" title="Jump to tool buttons - Alt+Q, Jump to editor - Alt-Z, Jump to element path - Alt-X" accesskey="z" href="#"></a> 
</td> 
</tr> 
<tr> 
<tr class="mceLast"> 
</tbody> 
</table> 
</span> 

Answer 1

Tôi đã thực hiện việc này vài lần. Để giải quyết nó tôi đảm bảo rằng điều khiển tinyMCe không có tiêu điểm (gây ra một số lỗi trong một số trình duyệt), loại bỏ điều khiển tinyMCE và loại bỏ vùng văn bản mà điều khiển được liên kết với.

Dưới đây là các mã có liên quan:

if (typeof tinyMCE != 'undefined') { 
    tinyMCE.execCommand('mceFocus', false, 'main-text'); 
    tinyMCE.execCommand('mceRemoveControl', false, 'main-text'); 
    var container = document.getElementById('main-text-parent'); 
    container.removeChild(document.getElementById('main-text')); 
    //i normally just do $("#main-text").remove(); but you specified not using jquery, so this should, in theory, remove it, if main-text-parent is replaced with the parent container of your main-text. 
} 

Answer 2

Bất kỳ ai đi qua bài này. Bây giờ tinymce 4.X có hỗ trợ Xóa trang chỉnh sửa hoặc biểu mẫu người chỉnh sửa chỉ bằng cách gọi hàm xóa.

http://www.tinymce.com/wiki.php/api4:method.tinymce.remove

// Remove all editors bound to divs 
tinymce.remove('div'); 

// Remove all editors bound to textareas 
tinymce.remove('textarea'); 

// Remove all editors 
tinymce.remove(); 

// Remove specific instance by id 
tinymce.remove('#id');