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字体，如果选择的所有文本那么需要在特定跨度上应用这两种样式。

最新经营的事件元素。获取字体家族... –

@ 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>

更好。谢谢。它为我工作:) –

Javascript如何获取其字体家族的选定文本

相关推荐