Javascriptフォントファミリで選択されたテキストを取得する方法

Question

選択したテキストと段落からその範囲を保存するので、開いたhtmlを再度開いたときに後で選択して表示できます。私は範囲を保存するようなすべてのタスクを完了し、再び開くときに再び適用します。 だから私も、私はまた、削除することができ段落から選択し、リストに表示される文字列を保存していて、そのために私のような機能を使用しています： - それは働いていた今のところ>

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フォントファミリを適用する必要があり、すべてのテキストを「テキストコンテンツ」を選択した場合特定のスパンに両方のスタイルを適用する必要があります。

Answer 1

要素にwindow.getComputedStyleを使用してフォントファミリを取得できます。ただし、このメソッドは通常のテキストノードでは機能しないため、最初の直接の親要素を見つけるにはユーティリティ関数firstElementParent(node)が必要です。イベントによって

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>