關於在wysiwyg編輯器中的字體名稱/大小下拉

我正在爲IE瀏覽器的富文本編輯器工作，我想問一個關於在當前插入點獲取「fontname」值的問題。關於在wysiwyg編輯器中的字體名稱/大小下拉

問題是由空行，讓我們在編輯器中說，用戶已鍵入：

line 1 

line 2

空行是「行1」和「2號線」，空的HTML源代碼之間（通過IE生成當用戶按下「輸入」）在這個例子中一行：

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

，問題是這樣的：document.queryCommandValue("fontname")給我不同的值在鼠標的情況下單擊空行，並在移動的情況下使用鍵盤將光標移動到空行。

在鼠標點擊的情況下，它給了我瀏覽器的默認字體名稱，而在另一種情況下（使用鍵盤移動光標）它給了我正確的字體名稱（「Courier New」）。

實際上，在這兩種情況下，document.selection具有不同的「類型」值：鼠標點擊時爲「文本」，鍵盤時爲「無」。

任何幫助將不勝感激！

如果我的問題不清楚，請讓我知道。

來源

2011-12-13 John Jiang

這是有點不清楚你想達到什麼。然而，它看起來像你試圖從一個沒有的區域獲取字體。非破壞空間（ ）位於字體標記（<FONT> . . . </FONT>）之外，因此沒有該標記的屬性（面或大小）。如果非破壞空間位於字體標籤內，則可以獲得其面部。

這是一個fiddle說明。爲了看到一些東西，我用Hello替換了&nbsp。

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>

的Javascript：

// 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); 
}

點擊在第一段落標記文本觸發什麼。點擊第二個工作正常的文字。

我們可以解決這個問題，雖然有一點額外的JavaScript。

對於像第一個標記和下面的Javascript那樣的HTML，我們可以在包含&nbsp的標記內獲得字體的面部，即使&nbsp不在該字體標記內。

HTML：

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

的Javascript：

// 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);

這包括在小提琴的結束。

來源

2013-10-20 15:43:53 danasilver

關於在wysiwyg編輯器中的字體名稱/大小下拉

回答

相關問題