Question

我正在保存所选文本及其范围，因此我可以稍后再次打开html时显示它。我已完成所有任务，例如保存其范围，并在再次打开时再次应用。所以我也保存从段落中选择的字符串并将其显示在列表中，这样我也可以删除，为此我使用的函数如下： - ＆gt;

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)来查找第一个直接父元素。然后，您可以将选择文本放在带有内联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如何使用其字体系

1 个答案: