Contenteditable div -无法删除带有退格键的内部HTML节点

基础概念

contenteditable 是一个 HTML 属性，它允许用户直接在元素内编辑内容。当一个元素被设置为 contenteditable 时，用户可以通过键盘和鼠标对其进行编辑，就像在一个文本编辑器中一样。

类型与应用场景

类型：主要应用于需要用户直接编辑内容的场景，如富文本编辑器、在线文档编辑等。
应用场景：
- 博客平台的文章编辑器。
- 在线表单填写页面。
- 内容管理系统（CMS）中的内容编辑。

问题描述

在使用 contenteditable 的 div 中，有时会遇到无法通过退格键删除内部 HTML 节点的问题。这通常是由于浏览器的默认行为或 JavaScript 事件处理不当导致的。

原因分析

浏览器默认行为：某些浏览器在处理退格键时可能会有不同的行为，尤其是在存在复杂嵌套结构时。
JavaScript 事件处理：可能存在事件监听器阻止了默认的退格键行为，或者在处理删除操作时逻辑不正确。

解决方案

方法一：使用 JavaScript 监听退格键事件

可以通过 JavaScript 监听退格键事件，并手动处理删除操作。以下是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contenteditable Div</title>
</head>
<body>
    <div id="editableDiv" contenteditable="true">
        <p>This is a <span>test</span> paragraph.</p>
    </div>

    <script>
        document.getElementById('editableDiv').addEventListener('keydown', function(event) {
            if (event.key === 'Backspace' || event.key === 'Delete') {
                const selection = window.getSelection();
                const range = selection.getRangeAt(0);
                const startNode = range.startContainer;
                const endNode = range.endContainer;

                if (startNode.nodeType === Node.TEXT_NODE && startNode.textContent.length === 0) {
                    const parent = startNode.parentNode;
                    if (parent.nodeType === Node.ELEMENT_NODE && parent.childNodes.length === 1) {
                        parent.parentNode.removeChild(parent);
                    }
                }
            }
        });
    </script>
</body>
</html>

方法二：使用第三方库

可以使用一些成熟的富文本编辑器库，如 Quill.js 或 TinyMCE，这些库已经处理了大部分复杂的编辑逻辑，包括退格键删除节点的问题。

示例：使用 Quill.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Quill Editor</title>
    <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
</head>
<body>
    <div id="editor"></div>

    <script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
    <script>
        var quill = new Quill('#editor', {
            theme: 'snow'
        });
    </script>
</body>
</html>