contenteditable div换行后placeholder-container类丢失问题求助

问题说明 #

开发基于contenteditable div的文本编辑器时，遇到两个核心问题：

• 文本以placeholder-container类占位符（用于显示字数统计）隐藏时，在该行首按回车换行，新生成的行会被bodytext类覆盖，无法保留placeholder-container类，导致后续切换回原文本时，占位符覆盖原本隐藏的内容。
• 尝试强制插入<div class="empty"><br></div>实现换行，会生成两行内容（一行bodytext类、一行empty类），引发其他异常。

解决方案 #

修改handleInput函数，针对placeholder-container行首回车的场景做特殊处理，直接生成同类型的新行，并跳过后续默认类名覆盖逻辑，具体代码如下：

function handleInput(event) {
    const editor = document.getElementById('editor');
    const selection = window.getSelection();
    if (!selection.rangeCount) return;

    let range = selection.getRangeAt(0);
    let node = selection.anchorNode;
    let div = node.nodeType === 3 ? node.parentNode : node;

    // 特殊处理：光标在placeholder-container行首回车的情况
    const isPlaceholderLine = div.classList.contains('placeholder-container');
    const isAtLineStart = range.startOffset === 0 && (!node.previousSibling || node.previousSibling.nodeType !== Node.TEXT_NODE);
    if (isPlaceholderLine && isAtLineStart) {
        const newDiv = document.createElement('div');
        newDiv.className = 'placeholder-container';
        // 插入到当前placeholder行的前面，确保新行是该行的上一行
        div.before(newDiv);
        // 给新行添加br标签，确保contenteditable能正确识别为空行
        newDiv.innerHTML = '<br>';
        moveCursorToDiv(newDiv);
        return; // 跳过后续默认类名处理逻辑
    }

    if (div === event.target) {
        div = document.createElement('div');
        div.className = 'bodytext';
        editor.appendChild(div);
        div.appendChild(node);
    } else if (div.tagName !== 'DIV') {
        let newDiv = document.createElement('div');
        newDiv.className = 'bodytext';
        node.before(newDiv);
        newDiv.appendChild(node);
        div = newDiv;
    }

    // 原有的类名判断逻辑，仅对非placeholder场景生效
    if (!div.classList.contains('placeholder-container')) {
        if (node.textContent.trim() === '') {
            div.className = 'empty';
        } else if (node.textContent.startsWith('#')) {
            div.className = 'heading';
        } else if (node.textContent.startsWith('=')) {
            div.className = 'synopsis';
        } else if (node.textContent.startsWith('@')) {
            div.className = 'non-narrative';
        } else {
            div.className = 'bodytext';
        }
    }

    moveCursorToDiv(div);
}

function moveCursorToDiv(div) {
    const range = document.createRange();
    const selection = window.getSelection();
    range.selectNodeContents(div);
    range.collapse(false);
    selection.removeAllRanges();
    selection.addRange(range);
}

关键修改点 #

1. 新增行首判断逻辑：通过range.startOffset === 0结合节点前序元素判断，确认光标是否在placeholder-container行的开头。
2. 直接生成同类型新行：触发条件时，创建带placeholder-container类的div，插入到当前行之前，并添加<br>确保空行可编辑。
3. 跳过默认类覆盖：新行创建后直接返回，避免后续逻辑将其改为bodytext；同时在原有类名判断前增加判断，跳过placeholder-container行的类名修改。
4. 修正光标位置：确保新行创建后光标自动定位到新行末尾，符合编辑习惯。

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