2012-04-10 3 views
7

페이지를 다시로드하지 않는 js 응용 프로그램이 있으므로 탐색 할 때 TinyMCE 컨트롤을 완전히 제거해야합니다. 그런 다음이를 필요로하는 영역으로 이동할 때 다시 초기화하려고합니다. 이 질문에 대한 대답을 시도했지만 아무 것도하지 않는 것 같습니다.TinyMCE 컨트롤 제거 및 다시 추가

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

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

내 특정도 구현 :

//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"); 

가 나는 또한

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

내가 조건에서 경고를 넣을 때 문이 실행됩니다 알고를 시도했다. .. 그게 정확한 신분증 인거 알아. API에 묻힌 게있어? 나는 실종 됐어? 이것은 jQuery 버전이 아닙니다. 편집기는 제거 시도 후에도 유지되며, 양식이있는 상태로 돌아가서 다시 초기화하면 동일한 ID로 새 ID를 얻습니다.

편집 : 아래 솔루션은 현재 빌드 3.5b3에서는 작동하지 않으며 3.4.9에서만 작동합니다. 't 정의되지 않은'버그가 있습니다.

경우에 따라서는 init 이후에 DOM의 관련 부분입니다.

<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> 

답변

5

나는 이것을 몇 차례 실행했습니다. 이를 해결하기 위해 tinyMCe 컨트롤에 포커스 (일부 브라우저에서 일부 버그가 있음)가 없는지 확인하고 tinyMCE 컨트롤을 제거하고 컨트롤이 연결된 텍스트 영역을 제거합니다. 이 게시물에 건너

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. 
} 
+1

이 곳의 execCommand 기능이 걸릴 것입니다 명령을 무엇에 대한 문서입니까? 매뉴얼은 단지 첫 번째 매개 변수가 "수행 할 명령"이며 설명서에 "mceRemoveControl"에 대한 참조가 없음을 나타냅니다. – Andy

+0

http://www.tinymce.com/wiki.php/API3:method.tinymce.execCommand 및이 회담 mceRemoveControl에 대한 정보 : http://www.tinymce.com/wiki.php/TinyMCE3x:Command_identifiers – Patricia

21

어느 하나 :

다음은 관련 코드입니다. 이제 tinymce 4.X은 remove 기능을 호출하여 편집기 또는 편집기 양식 페이지를 제거 할 수 있습니다.

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'); 
+1

정말 고마워요! – Vitaly