css display none 속성이 Internet Explorer의 contenteditable div에 대해 작동하지 않습니다.

Question

contentEditable div에 선택 항목을 저장/복원하려면 일부 범위를 삽입해야합니다. 불행히도 이러한 범위에는 "range.setStart (startNode, 0);"를 허용하는 문자가 적어도 하나 이상 포함되어야합니다. 기능이 제대로 작동합니다.

<div contentEditable='true' id='THE_DIV'> 
    some text 
     <span id='START_SELECTION'>xxx</span> 
     selected text 
     <span id='END_SELECTION'>yyy</span> 
    other text 
</div> 

지금 없음으로 스팬 표시 속성을 설정하여 아무런 문제가 없어야하지만, 파이어 폭스가 제대로 요소를 숨 깁니다 동안 인터넷 익스플로러 (7)을 무시하는 것 같다 그래서,이 요소의 내 그룹입니다.

이 bheaviour는 contentEditable 속성과 관련되어 있지만 불행히도 (contentEditable 부모 div와 숨겨진 스팬 자식) 모두 필요합니다.

제안 하시겠습니까?

미리 감사드립니다.

Flavio.

Answer 1

IE의 의도적 인 동작입니다. 당신이 그것을 사용하지 실행할 수있는 little-known command이있다 : http://jsfiddle.net/DGWZF/1/ 또한

, 당신은 Rangy's selection save and restore module을 보았다 :

document.execCommand("RespectVisibilityInDesign", false, true); 

이 데모를 참조하십시오? 그것은 당신이하려는 것을 정확하게합니다. 공개 : 저는 Rangy의 주요 개발자입니다.

Answer 2

감사합니다. Tim, 이미 Rangy 플러그인을 여러 번 보았습니다 (이전의 여러 답변을 보았습니다). 내가 찾고있는 것에 매우 가깝습니다. 불행히도 나는 화살표 키를 통해 커서를 움직이는 동안 FF에서 이상한 행동을 발견했습니다. 커서가 다른 범위로 스팬 colse 들어올 때 왼쪽 화살표가 작동하지 않습니다.

은 좀 더 명확하게하려고 :

<div contenteditable='true' id='THE_EDITOR'> 
    some text <span class='in_red'>other in red</span><span class='in_blue'>||or in blue</span> 
</div> 

내가 사용했습니다 "||" 커서를 나타냅니다. 이 경우 는 : <span></span><span>||</span> 왼쪽 화살표 (나는 이유를 이해하지 못하는) FF에서 커서를 이동하는 데 실패하지만, 두 요소 사이에 적어도 하나 개의 문자가있는 경우 제대로 작동 : 당신이 시도하려는 경우 <span></span>[space]<span>||</span>

가 당신이 다음 왼쪽으로 커서가 이동하지 화살표를 사용하여 뒤로 이동 순서로 "*"두 개 이상의 입력하려고하면

$("#THE_EDITOR").attr("contentEditable","true").keyup(function(){ 

    var savedSel = rangy.saveSelection(); 

    //this blok is only to clean the HTML code every time 
    $(this).children(".star").each(function(){ 
     $(this).after($(this).html()); 
     $(this).remove(); 
    }); 

    //to wrap the spewial word "*" with a personal formatting span 
    var str = $(this).html(); 
     str = str.split("*").join("<span class='star'>*</span>"); 

    $(this).html(str); 

    rangy.restoreSelection(savedSel); 
    rangy.removeMarkers(savedSel); 
}); 

이 "버그"코드 (jQuery를 사용하여)되어 재현. 사이에 공백이나 다른 문자를 넣으면 다시 움직입니다.