빈 태그에 커서를 놓습니다.

Question

디자인 모드에서 iframe을 사용하여 특수한 서식 지정 기능을 사용하여 텍스트 편집기를 작성하고 있습니다. 빈 요소에서 커서의 위치, 예컨대 : 내가 커서를 설정하려는

<p></p> 

를 설정할 때 나는 문제를 가지고, 그래서 사용자가 입력을 계속하면 텍스트는 <p> 태그 사이에 나타났다.

<iframe id="editor"></iframe> 

$(document).ready(function() { 
    var iframe = $('#editor').contents().get(0); 
    var iwin = $('#editor')[0].contentWindow; 
    iwin.document.designMode = "on"; 
    $('body', iframe).html('<p>ppp1</p><p></p><p>ppp3</p>'); 

    $('#editor').focus(); 
    var start = $('p', iframe)[1]; 

    var rng = $('#editor')[0].contentDocument.createRange(); 
    rng.setStart(start, 0); 
    rng.setEnd(start, 0); 

    var sel = iframe.getSelection(); 
    sel.removeAllRanges(); 
    sel.addRange(rng); 

}); 

JsFiddle : 다음은 내 코드입니다 http://jsfiddle.net/xbit/MGaTf/3/

Answer 1

여기에 몇 가지 문제가 있습니다

가

• 빈 단락 대부분의 브라우저에서 시각적으로 렌더링하지 않습니다가. 거기에 약간의 콘텐츠가 필요합니다.
• iframe의 Window 개체가 아닌 iframe의 문서에서 getSelection()을 호출했습니다. var sel = iwin.getSelection();이 필요합니다.
• IE에서 완전히 작동하지 않을 수 있습니다. IE를 완전히 다른 방식으로 처리 할 수 ​​있습니다.
• WebKit은 빈 요소에 캐럿을 배치 할 수 없습니다. 다른 사소한 문제 몇 가지가있다 https://bugs.webkit.org/show_bug.cgi?id=15256

참조 : iframe이 DOM 요소에 대해, contentWindow 비 표준 및 contentDocument가 보편적으로 지원되지 않습니다이다. (불행히도 두 번째 단락이 더 이상 비어 있지만) 나는 당신의 예를 업데이트되지했습니다

var iframe = $('#editor')[0]; 
var idoc, iwin; 
if (typeof iframe.contentDocument != "undefined") { 
    idoc = iframe.contentDocument; 
    iwin = idoc.defaultView; 
} else if (typeof iframe.contentWindow != "undefined") { 
    iwin = idoc.contentWindow; 
    idoc = iwin.document; 
} 

: http://jsfiddle.net/timdown/MGaTf/6/

나는 표준의 최대 사용을 위해 다음과 같은 것을 건의 할 것