如何在TinyMCE中获取插入的figure父节点而非blockquote节点？

我懂你遇到的问题——选中引用内容时，selection.getNode()只会返回内部的<blockquote>，但你真正需要的是外层的<figure>父节点。其实解决思路很直接：从当前选中的节点向上遍历DOM树，定位到目标figure元素。

这里有两种实用的实现方式：

方法一：用原生DOM的closest()方法（推荐） #

closest()方法会从当前节点开始，向上查找第一个匹配指定选择器的祖先元素，代码简洁又高效：

// 获取当前选中的节点
const selectedNode = tinyMCE.activeEditor.selection.getNode();
// 精准定位带有data-type="rtv-quotes"的figure节点
const targetFigure = selectedNode.closest('figure[data-type="rtv-quotes"]');

if (targetFigure) {
  // 成功找到目标节点，执行你的逻辑
  console.log('找到的figure节点:', targetFigure);
} else {
  console.log('未找到对应的引用figure组件');
}

不管你选中的是<blockquote>里的文本、<footer>里的作者名还是链接，这个方法都能精准定位到外层的figure容器。

方法二：手动遍历父节点（兼容性兜底） #

如果需要兼容一些老旧浏览器（现在基本很少见了），可以手动循环遍历父节点：

let currentNode = tinyMCE.activeEditor.selection.getNode();
let targetFigure = null;

// 向上遍历直到body节点，避免无限循环
while (currentNode && currentNode.nodeName !== 'BODY') {
  // 检查当前节点是否是目标figure
  if (currentNode.nodeName === 'FIGURE' && currentNode.dataset.type === 'rtv-quotes') {
    targetFigure = currentNode;
    break;
  }
  // 移动到父节点继续查找
  currentNode = currentNode.parentNode;
}

if (targetFigure) {
  // 处理你的业务逻辑
}

核心逻辑就是先拿到当前选中的子节点，再向上追溯找到对应的父容器，这样就能轻松获取到你需要的<figure>节点啦～

内容的提问来源于stack exchange，提问作者blaba