如何用JavaScript动态获取contenteditable段落的输入内容？

直接利用input事件就能实现需求，这是contenteditable元素内容变更时的标准触发事件，覆盖所有内容修改场景（键盘输入、粘贴、剪切等），比Mutation Observer和Clipboard API更适配你的需求。

修改后的代码如下：

// 定义变量存储段落内容，可根据需求调整作用域
let paragraphContent = "";

const newParagraphBtn = document.querySelector('.paragraph');

newParagraphBtn.addEventListener("click", () => {
    const editorContainer = document.querySelector('.lesson-editing-editablecontent');
    const editablePara = document.createElement("p");
    
    editablePara.className = "new-paragraph";
    editablePara.contentEditable = true;
    editablePara.innerHTML = "Paragraph";
    
    // 监听内容变更事件
    editablePara.addEventListener('input', () => {
        // 将当前段落的实时内容存入变量
        paragraphContent = editablePara.innerHTML;
        
        // 可选：验证存储结果
        console.log("当前存储的内容：", paragraphContent);
        
        // 注：contenteditable元素会自动同步输入内容到innerHTML，无需额外赋值
        // 若特殊场景下需要强制同步，可添加：editablePara.innerHTML = paragraphContent;
    });

    editorContainer.appendChild(editablePara);
});

关键说明 #

• input事件会在contenteditable元素的内容发生任何变更时立即触发，完全覆盖实时同步需求。
• 无需依赖Mutation Observer（它更适合监听DOM结构变更而非内容输入），也不用Clipboard API（仅能处理粘贴场景）。
• 变量paragraphContent会实时保存当前段落的完整HTML内容，如果你需要纯文本，可替换为editablePara.textContent。

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