如何在contenteditable div中让换行自动嵌套span与p标签

我有一个设置了contenteditable="true"的div，希望按下回车键换行时，新行内容被包裹在<span>标签内，且该span标签嵌套在<p>标签中，但目前按下回车只会生成新的<div>标签。

初始代码

<div contenteditable="true"></div>

输入文本

• some text
• some new text
• some more new text

当前结果

<div contenteditable="true">
    some text
    <div>some new text</div>
    <div>some more new text</div>
</div>

期望结果

<div contenteditable="true">
    <p><span>some text</span></p>
    <p><span>some new text</span></p>
    <p><span>some more new text</span></p>
</div>

实现思路 #

通过监听keydown事件拦截回车键的默认行为，手动创建<p>+<span>结构插入编辑区域，同时调整光标位置到新创建的span内，确保后续输入正常；额外添加模糊事件处理，统一编辑区DOM结构，避免异常情况。

代码实现 #

const editableDiv = document.querySelector('[contenteditable="true"]');

// 初始化：编辑区为空时，自动插入第一个p+span结构
if (!editableDiv.innerHTML.trim()) {
    const p = document.createElement('p');
    const span = document.createElement('span');
    p.appendChild(span);
    editableDiv.appendChild(p);
    
    // 光标定位到span内
    const range = document.createRange();
    const sel = window.getSelection();
    range.setStart(span, 0);
    range.collapse(true);
    sel.removeAllRanges();
    sel.addRange(range);
}

// 监听回车事件，自定义换行结构
editableDiv.addEventListener('keydown', function(e) {
    if (e.key === 'Enter') {
        e.preventDefault(); // 阻止默认生成div的行为

        // 创建新的p和span元素
        const newP = document.createElement('p');
        const newSpan = document.createElement('span');
        newP.appendChild(newSpan);

        // 获取当前光标所在的p元素
        const selection = window.getSelection();
        const currentRange = selection.getRangeAt(0);
        let currentP = currentRange.commonAncestorContainer;
        while (currentP && currentP.tagName !== 'P') {
            currentP = currentP.parentNode;
        }

        // 插入新p到当前p的后方
        if (currentP) {
            currentP.parentNode.insertBefore(newP, currentP.nextSibling);
        } else {
            this.appendChild(newP);
        }

        // 光标移到新span内
        const range = document.createRange();
        range.setStart(newSpan, 0);
        range.collapse(true);
        selection.removeAllRanges();
        selection.addRange(range);
    }
});

// 模糊事件：统一编辑区结构，修正异常DOM
editableDiv.addEventListener('blur', function() {
    Array.from(this.childNodes).forEach(node => {
        // 将非p的块级元素转为p+span
        if (node.nodeType === Node.ELEMENT_NODE && node.tagName !== 'P') {
            const p = document.createElement('p');
            const span = document.createElement('span');
            span.innerHTML = node.innerHTML;
            p.appendChild(span);
            this.replaceChild(p, node);
        }
        // 给没有span的p标签补上span
        if (node.tagName === 'P' && !node.querySelector('span')) {
            const span = document.createElement('span');
            span.innerHTML = node.innerHTML;
            node.innerHTML = '';
            node.appendChild(span);
        }
    });
});

代码说明 #

1. 初始化处理：确保编辑区一开始就处于<p><span>结构下，避免初始输入直接生成文本节点。
2. 回车事件拦截：完全接管回车行为，生成目标DOM结构并自动调整光标位置，保证输入体验流畅。
3. 模糊事件优化：处理粘贴、手动修改DOM等场景导致的结构混乱，强制统一为目标格式。

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