td文本编辑遇多<br>标签及光标错位问题求助

需要编辑td元素内的文本，文本未使用div包裹，而是通过<br>标签分隔（后续由其他函数识别）。当前实现存在两个问题：

• 按下Enter键时会生成多个多余的<br>标签
• 光标位置错乱，无法正确跟随换行

原代码：

function editCells() {
    editorMode = !editorMode;
    let cells = document.querySelectorAll('.row_lessons td');
    let editor = document.getElementById("editor");

    cells.forEach(function (cell) {
        if (editorMode) {
            cell.contentEditable = "true"; 
            editor.textContent = 'Stop editing';
            cell.style.textAlign = 'left';
    
            cell.addEventListener("keydown", function (event) {
                if (event.key === "Enter") {
                    cell.style.textAlign = 'left';
                    event.preventDefault();

                    const cellT = cell.textContent;
                    const range = window.getSelection().getRangeAt(0);
                    const br = document.createElement('br');
                    range.insertNode(br);

                    cellT.setStartAfter(br);
                    range.setEndAfter(br);

                    this.focus()
                }
            });
        } else {
            cell.style.textAlign = 'center';
            cell.contentEditable = "false"; 
            editor.textContent = 'Edit cells';

            exitEditorMode();
        }
    });
    if (!editorMode) {
        applyClassesBasedOnKeywords();
    }
};

1. 事件重复绑定：每次开启编辑模式都会给td新增keydown事件监听，导致回车事件被多次触发，生成多个<br>
2. 光标逻辑错误：cellT是td的文本内容（字符串），不是Range对象，调用cellT.setStartAfter(br)完全无效，导致光标位置无法正确设置
3. 无重复换行校验：没有检查当前位置是否已有<br>，连续回车会重复插入换行标签

function editCells() {
    editorMode = !editorMode;
    let cells = document.querySelectorAll('.row_lessons td');
    let editor = document.getElementById("editor");

    cells.forEach(function (cell) {
        if (editorMode) {
            cell.contentEditable = "true"; 
            editor.textContent = 'Stop editing';
            cell.style.textAlign = 'left';
            
            // 先移除已有事件，避免重复绑定
            cell.removeEventListener("keydown", handleEnterKey);
            cell.addEventListener("keydown", handleEnterKey);
        } else {
            cell.style.textAlign = 'center';
            cell.contentEditable = "false"; 
            editor.textContent = 'Edit cells';
            // 关闭编辑时移除事件监听
            cell.removeEventListener("keydown", handleEnterKey);
            exitEditorMode();
        }
    });
    if (!editorMode) {
        applyClassesBasedOnKeywords();
    }
};

// 独立处理回车逻辑，避免重复绑定
function handleEnterKey(event) {
    if (event.key === "Enter") {
        event.preventDefault();
        const selection = window.getSelection();
        const range = selection.getRangeAt(0);
        
        // 检查光标前是否已有<br>，避免重复插入
        const prevNode = range.startContainer.previousSibling;
        if (prevNode && prevNode.nodeName === "BR") {
            return;
        }
        
        const br = document.createElement('br');
        range.insertNode(br);
        
        // 创建新Range，将光标定位到<br>之后
        const newRange = document.createRange();
        newRange.setStartAfter(br);
        newRange.setEndAfter(br);
        
        // 更新选区，确保光标位置正确
        selection.removeAllRanges();
        selection.addRange(newRange);
        
        this.focus();
    }
}

• 解决重复绑定：将回车处理逻辑抽为独立函数handleEnterKey，开启编辑时先移除旧事件再绑定，关闭编辑时移除事件，避免多次触发插入逻辑
• 修复光标定位：创建新的Range对象，正确设置光标到<br>标签之后，替换原代码中无效的字符串操作
• 防止重复换行：检查光标前一个节点是否为<br>，若是则跳过插入，避免生成多余换行标签
• 精简冗余代码：删除了重复设置textAlign的代码（开启编辑时已完成设置）

内容的提问来源于stack exchange，提问作者にかx_18