2011-09-03 4 views
3

tinyMCE를 인라인 편집기로 추가했습니다. 다음 프로 블렘을 가져보십시오 : 처음에는 작업이 좋았습니다 - 사용자 정의 스타일로 표시 (설정대로) 제대로 작동하지만 취소를 클릭하고 다시 편집을 시작하면 편집 영역에 텍스트가없는 빈 편집기가 나타납니다. 이 코드는 다음과 같습니다. UPD : cm.Node - docuement.createElement 및 el.setAttribute, cm.getByAttr ('attr', 'attr_val', el)에 대한 래퍼 - el에서 attr에 의해 elemnt를 가져옵니다. REQ - AJAX를위한 래퍼, cm.merge - array_merge 같은 PHP에서두 번째 쇼와 함께 TinyMCE 문제. 도움말

var EditBlock = function(){ 
    var my = this; 
    var o = cm.merge({ 
     'id' : '', 
     'act' : '', 
     'val' : '', 
     'nobr' : false, 
     'text' : false, 
     'onSaved' : function(){}, 
     'onSave' : function(){}, 
     'params' : {'iconsPath' : 'interface/common/images/stdc/nicEditorIcons.gif'} 
    }, arguments[0]); 
    var prefix = 'tinyMCE_' + Math.random() + '_'; 
    var node = cm.getEl(o.id); 
    var txtArea = cm.addClass(cm.Node('textarea', {'id' : prefix + o.id, 'style': ('width:' + node.offsetWidth + 'px')}), prefix + o.id); 
    var saveBtn = cm.Node('input', {'type':'button', 'value':'Save'}); 
    var cancelBtn = cm.Node('input', {'type':'button', 'value':'Cancel'}); 
    var container = cm.Node('div', txtArea, cm.Node('div', saveBtn, cancelBtn)); 

    var plainText = function(node){ 
     var str = ''; 
     var childs = node.childNodes;   
     for(var i = 0, ln = childs.length; i < ln; i++){ 
      if(childs[i].nodeType == 3) 
       str += childs[i].nodeValue; 
      else if(childs[i].childNodes.length) 
       str += plainText(childs[i]); 
     } 
     return str; 
    } 

    var init = function(){ 
     node.onclick = my.edit; 
     cancelBtn.onclick = my.close; 
     saveBtn.onclick = function(){ 
      my.save(); 
      my.close(); 
     } 
    } 

    my.save = function(){ 
     var tmp = cm.Node('div', tinyMCE.get(prefix + o.id).getContent()); 
     var content = o.text? plainText(tmp) : tmp.innerHTML; 
     o.onSave(content); 
     node.innerHTML = content; 
     req({ 
     'act' : o.act, 
     'data' : 'data[content]=' + escape(content) + (o.val? '&data[val]=' + o.val : ''), 'handler' : function(){o.onSaved(content)} 
     }); 
    } 
    my.close = function(){ 
     tinyMCE.init({ 
      'editor_deselector' : prefix + o.id 
     }); 
     container.parentNode.removeChild(container); 
     node.style.display = 'block'; 
    } 
    my.edit = function(){ 
     txtArea.value = node.innerHTML; 
     node.style.display = 'none'; 
     node.parentNode.insertBefore(container, node); 
     var styles = ''; 
     var styleRef = cm.getByAttr('rel', 'stylesheet'); 
     for(var i = 0, ln = styleRef.length; i < ln; i++){ 
      styles += (i > 0? ',' : '') + styleRef[i].href; 
     } 
     tinyMCE.init({ 
      'height' : '100%', 
      'content_css' : styles + ',/sdtc-new/nc/interface/common/css/mce-editor.css', 
      'mode' : "specific_textareas", 
      'editor_selector' : prefix + o.id 
     }); 

    } 
    init(); 
} 

사용과 같은 : 다시 문제에 대한

new EditBlock({'onSave' : function(content){ 
      page.content = content; 
      viewDepartment(page); 
     }, 'id':'depContent', 'act' : '/departments/setContent/', 'val' : page.id, 'params' : {buttonList : ['fontSize','bold','italic','underline','strikeThrough','html']}}); 

그래서 .... 처음에 편집을 시작하면 저장을 클릭해도 제대로 작동합니다. 모든 버그는 여전히 존재하지만 (저장 후에도 클릭하고 다시 편집을 시작할 수 있습니다.)하지만 편집을 취소하려면 숨기기를 클릭하지만 다시 편집하려면 클릭하십시오. 빈 편집 영역 콘솔을보고 사라진 후 다시 편집을 시작한 후 새로운 편집을 만들지 만 이전에는 파괴하지 않고 숨겨진 것만 찾습니다.

나는 hideet, show 및 setContent와 같은 usetynyMCE.Editor 클래스 메소드를 시도하고 일부 결과가 있습니다. 취소 한 후에는 egain을 편집 할 수 있지만 편집 영역에는 스타일과 버튼이 없었습니다.

도와주세요. 만약에 코드에 의한 quaestion이라면 - 대답하게되어 기쁩니다. 감사합니다. .

답변

5

여기서 hide()show()을 사용하지 마십시오. 첫 번째 ID와 동일한 ID를 가진 주석 편집기를 다시 초기화 할 수 있으려면 주석을 올바르게 종료해야합니다.

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

tinymce.execCommand('mceAddControl',true,'editor_id'); 
+1

당신이 할 말은 tinyMCE.init을 사용 하시겠습니까? 또는 제 시간에 그것을 사용하고 다른 것을 execCommand를 사용하십시오. 공식 사이트에서 명확한 예를 찾을 수 없기 때문에 간단한 예제 나 링크를 예제로 제공 할 수 있다면 제발. 대답 – ZigZag

+1

주셔서 감사합니다 tinyMCE.init, 사용할 수 있지만 DOM 주위에 편집기를 이동하거나 ajax를 통해로드 할 경우 먼저 이전 tinymce 인스턴스를 종료해야합니다. – Thariama

+0

감사합니다, 이것은 정확히 내가 필요합니다. – ZigZag

3

있습니다 사용 초기화하려면

는 edtor 인스턴스 사용을 종료하려면! 이이 변경 이후 (새 버전, 4+ 나는 생각한다), 당신은 더 좋은 행운이있을 수 있습니다 :

mceRemoveEditor 대신 mceAddEditor을 시도 ...에 같이

tinymce.execCommand('mceRemoveEditor',true,'editor_id'); 

tinymce.execCommand('mceAddEditor',true,'editor_id');