wysiwyg 편집기에서 글꼴 이름/크기 드롭 다운에 대해

Question

IE 용 서식있는 텍스트 편집기에서 작업하고 있는데 현재 삽입 지점에서 "fontname"값을 가져 오는 것에 대해 질문하고 싶습니다.

문제는 빈 라인이다,의 사용자가에 입력 한 편집기에서 가정 해 봅시다 :

line 1 

line 2 

빈 라인은 "라인 1"과 "라인 2", 빈의 HTML 소스 사이

<P><FONT size=5 face="Courier New"></FONT>&nbsp;</P> 

하고 문제 이것이다 : document.queryCommandValue("fontname")은 빈 줄을 클릭 한 마우스의 경우에는 나에게 다른 값을 제공하고, 이동의 경우이 예에서는 라인 (사용자를 누르십시오 "입력"이 때 IE에 의해 생성)한다 키보드를 사용하여 빈 줄로 커서를 이동하십시오.

마우스 클릭의 경우에는 브라우저의 기본 글꼴 이름을 제공하고 다른 경우에는 키보드를 사용하여 커서를 이동하면 올바른 글꼴 이름 ("Courier New")을 제공합니다.

document.selection에는 실제로 두 가지 유형의 값이 있습니다. 마우스를 클릭하면 "텍스트", 키보드는 "없음"입니다.

도움이 될 것입니다.

제 질문에 명확하지 않은 경우 친절하게 알려주세요.

Answer 1

달성하려는 목표가 다소 명확하지 않습니다. 그러나 글꼴이없는 영역에서 글꼴을 얻으려고하는 것처럼 보입니다. 줄 바꿈하지 않는 공간 ( )은 글꼴 태그 (<FONT> . . . </FONT>) 외부에 있으므로 해당 태그 (얼굴 또는 크기)의 속성이 없습니다. 폰트 태그 내부에 끊기지 않는 공백이 있으면 그 얼굴을 얻을 수 있습니다.

여기에 그 것을 나타내는 fiddle이 있습니다. 뭔가를보기 위해 &nbsp을 Hello으로 바꿨습니다.

는

HTML :

<!-- Hello is outside the font tag. --> 
<P><FONT size=5 face="Courier New"></FONT>Hello</P> 

<!-- Hello is inside the font tag. --> 
<p><font size=5 face="Times New Roman">Hello</font><p> 

자바 스크립트 : 첫 번째 단락 태그에서 텍스트에

// Alert the face 
function handleFonts(e) { 
    alert(this.face); 
} 

// Get all the font elements 
var el = document.querySelectorAll("font"); 

// Bind event handlers to the elements 
// The last element of "el" is it's length so we only 
// iterate to el.length - 1 or i < el.length 
for (var i = 0; i < el.length; i++) { 
    el[i].addEventListener("click", handleFonts, true); 
    el[i].addEventListener("keypress", handleFonts, true); 
} 

클릭하면 아무것도 트리거하지 않습니다. 두 번째 텍스트를 클릭하면 문제가 없습니다.

약간의 추가 자바 스크립트로이 문제를 해결할 수 있습니다.

첫 번째 태그와 다음 자바 스크립트에서와 같이 HTML은 &nbsp이 해당 글꼴 태그 내에 없더라도 &nbsp을 포함하는 태그 내에서 글꼴의 얼굴을 가져올 수 있습니다.

HTML :

<p id="last-p-tag"><font size=5 face="Tahoma"></font>Hello</p> 

자바 스크립트 :

// Get the paragraph tag we want 
var lastPTag = document.getElementById("last-p-tag"); 

// Bind an event to clicking on it 
lastPTag.addEventListener("click", function(e) { 
    // Alert the face attribute of the first font element 
    // within that p tag 
    alert(this.querySelector("font").face); 
}, true); 

이이 바이올린의 끝 부분에 포함되어 있습니다.