Question

我正在创建一个富文本编辑器，我想使用相同的按钮链接和取消链接选择。

document.execCommand('createLink'...)和document.execCommand('unlink'...)允许用户关联和取消关联window.getSelection().toString()。

但是，没有内置的方法来确定选择是否首先被链接，所以我的问题是：如何检查选择是否已链接？

我已尝试使用document.queryCommandState('createLink')和document.queryCommandState('unlink')，但两个查询始终返回false，即使例如document.queryCommandState('bold')正常工作。

Answer 1

您还可以检索链接 HTML 元素并将其传递给 Selection.containsNode()

const linkHtmlElement = document.getElementById('yourId');
// should return true if your linkHtmlElement is selected
window.getSelection().containsNode(linkHtmlElement)

Answer 2

我找到了以下一段代码，它暂时运行得很好，在SO上开始：

const isLink = () => {
  if (window.getSelection().toString !== '') {
    const selection = window.getSelection().getRangeAt(0)
    if (selection) {
      if (selection.startContainer.parentNode.tagName === 'A'
      || selection.endContainer.parentNode.tagName === 'A') {
        return [true, selection]
      } else { return false }
    } else { return false }
  }
}

Answer 3

您需要检查anchorNode和focusNode文本节点以查看它们是否为a元素。有关MDN

的更多详细信息

function isLink () {
  const selection = window.getSelection()
  const startA = selection.anchorNode.parentNode.tagName === 'A'
  const endA = selection.focusNode.parentNode.tagName === 'A'
  return startA || endA
}

检查选择是否包含链接

3 个答案: