2012-03-21 7 views
0

와 함께 HTML 블록의 부모 노드를 가져옵니다 : 나는 단지 선택 스팬 아니라 사업부를 얻을이 사업부를 선택하려고 할 때 내 편집기에서내가 HTML 블록이 자바 스크립트

<div style="text-align:left"> 
    <span>aaaaa</span> 
    <span>bbbbb</span> 
    <span>ccccc</span> 
    <span>ddddd</span> 
</div> 

합니다. 그래서이 코드 내 선택은 다음과 같습니다

sel = parent.document.getElementById('frame').contentWindow.document.getSelection(); 
var range = sel.getRangeAt (0); 
var docFragment = range.cloneContents(); 
var tmpDiv = document.createElement ("div"); 
tmpDiv.appendChild (docFragment); 
selHTML = tmpDiv.innerHTML; 

그래서 나는 (selHTML)을 경고 할 때 나는 구걸에 쓴 스팬과 코드를 얻을. 그러나이 HTML은 div로 싸여 있습니다. 어떻게이 div를 얻을 수 있습니까?

내가 원하는대로 execCommand를 수동으로 만들고 싶습니다. 왜냐하면 파이어 폭스에서 execCommand를 사용하기 때문에 선택이 제대로 수행되지 않았기 때문에 제대로 작동하지 않고 이미 가지고있는 div에서 텍스트 정렬을 변경하는 대신 새로운 div를 추가합니다. 사전에

덕분에

+0

'selHTML = tmpDiv.parentNode.innerHTML'은 어떻습니까? – deed02392

+0

"tmpDiv.parentNode is null"이라는 메시지가 나타나면 – novellino

+0

이 맞습니다. 아직 아무 것도 추가되지 않았습니다. div를 포함하여 div의 모든 HTML을 얻으려면 outerHTML을 사용하십시오. –

답변

1

난 당신이 사업부와 그 내용을 모두 포함해야한다 outerHTML에를 원하는 생각합니다.

selHTML = tmpDiv.outerHTML; 

또는

sel = parent.document.getElementById('frame') 
    .contentWindow.document.getSelection(); 

var range = sel.getRangeAt (0); 
var docFragment = range.cloneContents(); 
var tmpDiv1 = document.createElement("div"); 
var tmpDiv2 = document.createElement('div'); 
tmpDiv2.appendChild (docFragment); 
tmpDiv1.appendChild(tmpDiv2); 
selHTML = tmpDiv1.innerHTML; 
+0

네,하지만 이건 단지 임시 div와 모든 내용을 제공합니다. 전체 내용을 정말로 원하지는 않습니다. 이 범위가 div로 이미 텍스트 정렬로 둘러싸여 있는지 확인하기 만하면됩니다. – novellino

+0

Firefox에서 'outerHTML'은 최신 Firefox 버전에서만 사용할 수 있습니다 : https://bugzilla.mozilla.org/show_bug.cgi?id=92264 – ZER0

+0

div 요소를 다른 객체에 추가해야한다고 가정합니다. 그 중 innerHTML 가져와. –

0

당신은 setHTML.parentNode을 시도 했습니까?

+0

예.하지만 경고 할 때 "정의되지 않음"이 나타납니다. – novellino

+0

selHTML은 문자열이기 때문입니다. 네가 tmpDiv.parent를 의미한다고 생각해. 그러나 tmpDiv가 아직 아무 것도 추가되지 않았으므로 .parent는 null입니다. –

+0

예, 그렇지만 다시 tmpDiv.parentNode가 표시되면 null이 표시됩니다. – novellino

0

Firefox에서는 commonAncestorContainer 속성을 사용할 수 있습니다. 따라서 귀하의 경우 :

var range = sel.getRangeAt(0); 
var container = range.commonAncestorContainer; 

if (container && container.tagName === "div" && container.style.textAlign) { 
    // it's a div tag with an inline style text-align prop 

    // you can also modify the container directly: 
    container.style.textAlign = "center"; 
}