Javascript如何獲取其字體家族的選定文本

我保存選定的文本及其段落的範圍，所以我可以稍後顯示它再次打開HTML時選擇它。我已經完成了所有任務，例如保存範圍，再次打開時再次應用。所以我還節省了這是從段落選擇，並在列表中顯示它，這樣我也可以刪除該字符串，併爲我使用的功能，如： - >Javascript如何獲取其字體家族的選定文本

var selection = window.getSelection(); 
var textString = selection.toString();

截至目前，它正在精細。但是現在我在編輯器中添加了多種語言。所以，如果我保存字符串像上面應用於選定文本的字體家族，它沒有得到顯示。

所以我想保存它的字體樣式，所以當我在列表中顯示選定的文本時，它將呈現爲它的字體樣式。

我怎樣才能得到當前應用於選定的dom字體家族。如果不是字體系列應用於選定的dom，它將來自其父項。

我不需要其他風格類似，顏色，字體，重量等

假設：

<span style="font-family: "Times New Roman", Times, serif;>This is<span style="font-family:Conv_DevLys_040">Test content.</span><span>

如果我選擇「文本內容」，則需要申請Conv_DevLys_040字體，如果選擇的所有文本那麼需要在特定跨度上應用這兩種樣式。

來源

2017-03-17 Gitesh Purbia

最新經營的事件元素。獲取字體家族... –

@ RokoC.Buljan任何示例？ –

文本選擇可能跨越多個元素。所以邏輯上是多種多樣的風格。因此你的要求不清楚。 –

您可以在元素上使用window.getComputedStyle來獲取其字體系列;但是，此方法不適用於常規文本節點，因此需要使用效用函數firstElementParent(node)才能找到第一個直接父元素。然後，您可以用內嵌font-family括在跨度選擇文本，並插入無論你想要的HTML文本：

function getSelectionWithFont() { 
 

 
    function firstElementParent (node) { 
 
    while (!node.parentElement) node = node.parentNode 
 
    return node.parentElement 
 
    } 
 

 
    var output = document.getElementById('output') 
 
    
 
    var selection = window.getSelection() 
 

 
    var htmlString = selection.isCollapsed ? 
 
    selection.toString() : 
 
    '<span style="font-family:' + window.getComputedStyle(
 
     firstElementParent(selection.anchorNode) 
 
    ).fontFamily + '">' + selection + '</span>' 
 
    
 
    document.getElementById('output').innerHTML = htmlString 
 

 
}

<p id="input" contenteditable="true" style="font-family:Georgia">Lorem ipsum dot dolor sit amet...</p> 
 

 
<button onclick="getSelectionWithFont()">Get Selection with Font</button> 
 
<p id="output"></p>

來源

2017-03-17 07:18:43 gyre

更好。謝謝。它爲我工作:) –

Javascript如何獲取其字體家族的選定文本

回答

相關問題