如何调整CKEDITOR中新Widget的生成位置至对应行首单元格？

嘿，这个需求我之前做类似表格交互时也碰到过，核心思路就是别盯着点击的坐标位置插Widget，而是顺着DOM结构找对目标容器，给你分两种常用场景说具体实现：

不管用什么技术栈，步骤都是一致的：

1. 捕捉到「Smith」文本的点击事件后，找到它所属的整个表格行（<tr>元素）
2. 在这一行里定位到第一个单元格（<td>）
3. 把新生成的Widget插入到这个第一个单元格中

假设你的表格结构是常规的HTML表格，给包含名字的单元格加个类名方便绑定事件：

<table>
  <tr>
    <td>1</td>
    <td class="name-cell">Smith</td>
    <td>Other data</td>
  </tr>
  <!-- 更多行 -->
</table>

对应的JS代码：

// 给所有名字单元格绑定点击事件
document.querySelectorAll('.name-cell').forEach(cell => {
  cell.addEventListener('click', function(e) {
    // 1. 向上遍历找到当前点击单元格所属的行
    const targetRow = this.closest('tr');
    if (!targetRow) return; // 容错处理，防止找不到行
    
    // 2. 获取该行的第一个单元格
    const firstCell = targetRow.querySelector('td:first-child');
    if (!firstCell) return;
    
    // 3. 创建你的新Widget（这里用一个示例span，换成你的实际元素即可）
    const newWidget = document.createElement('span');
    newWidget.textContent = '🔹 New Widget';
    newWidget.style.marginLeft = '8px'; // 加个样式区分
    
    // 4. 把Widget插入到第一个单元格里（appendChild是追加到末尾，prepend是插入到开头）
    firstCell.appendChild(newWidget);
  });
});

如果是用前端框架，思路是通过状态来控制Widget的显示位置，而不是直接操作DOM：

import { useState } from 'react';

const Table = () => {
  // 假设你的表格数据存在data数组里，每个项有id、name、firstCol内容等字段
  const [activeRowId, setActiveRowId] = useState(null);
  
  // 点击名字时，记录当前行的id
  const handleNameClick = (rowId) => {
    setActiveRowId(rowId);
  };
  
  return (
    <table>
      <tbody>
        {data.map(row => (
          <tr key={row.id}>
            <td>
              {/* 只有当前点击的行，才在第一个单元格显示Widget */}
              {row.id === activeRowId && (
                <span className="custom-widget">🔹 New Widget</span>
              )}
              {row.firstColumnContent}
            </td>
            <td onClick={() => handleNameClick(row.id)}>
              {row.name} {/* 这里就是Smith所在的单元格 */}
            </td>
            <td>{row.otherData}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
};

这样就能保证新Widget精准出现在对应行的第一个单元格里，而不是点击的文本旁边啦～

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