如何避免contenteditable在pre标签中拆分元素或添加br并替换为换行符

标签自动添加
的问题 #

问题背景 #

在带有contenteditable="true"的容器内编辑<pre><code>块时，按下回车会自动生成<br>标签，破坏了<pre>标签的预格式化特性，导致代码结构被污染：

初始代码结构：

<div class="ce" contenteditable="true">
<div>AAAAAAAAAAAAAAAAAAAAAA</div>
<div>
<pre><code>code</code></pre>
</div>
</div>

编辑后被自动修改的结构：

<div class="ce" contenteditable="true">
<div>AAAAAAAAAAAAAAAAAAAAAA</div>
<div>
<pre><code>code<br>dcsdc<br>sdc<br>sdc<br>sdc<br></code></pre>
</div>
</div>

期望的纯净格式：

<div class="ce" contenteditable="true">
<div>AAAAAAAAAAAAAAAAAAAAAA</div>
<div>
<pre><code>code
dcsdc
sdc
sdc
sdc</code></pre>
</div>
</div>

现有代码的问题 #

你之前尝试的代码存在两个核心问题：

1. 事件绑定逻辑冗余，在.ce的keydown事件内重复给code元素绑定事件，会导致同一事件被多次触发
2. 使用insertHTML插入换行符，浏览器仍可能将其解析为<br>标签，无法满足纯文本换行的需求

解决方案 #

直接给<pre>内的<code>元素绑定事件，使用insertText命令插入纯文本换行，同时阻止浏览器默认行为；额外处理粘贴事件，确保粘贴内容也以纯文本形式插入。

改进后的代码（jQuery版本） #

// 处理回车事件
$(document).on('keydown', '.ce pre code', function(e) {
    if (e.key === 'Enter') {
        e.preventDefault();
        // 插入纯文本换行，避免生成<br>
        document.execCommand('insertText', false, '\n');
    }
});

// 处理粘贴事件，确保粘贴内容为纯文本
$(document).on('paste', '.ce pre code', function(e) {
    e.preventDefault();
    const clipboardText = (e.originalEvent || e).clipboardData.getData('text/plain');
    document.execCommand('insertText', false, clipboardText);
});

原生JS版本 #

document.addEventListener('keydown', function(e) {
    const target = e.target;
    // 验证目标元素是否是.ce容器内的pre code
    if (target.tagName === 'CODE' && target.closest('.ce') && target.parentElement.tagName === 'PRE') {
        if (e.key === 'Enter') {
            e.preventDefault();
            document.execCommand('insertText', false, '\n');
        }
    }
});

document.addEventListener('paste', function(e) {
    const target = e.target;
    if (target.tagName === 'CODE' && target.closest('.ce') && target.parentElement.tagName === 'PRE') {
        e.preventDefault();
        const clipboardText = e.clipboardData.getData('text/plain');
        document.execCommand('insertText', false, clipboardText);
    }
});

关键说明 #

• 使用insertText而非insertHTML：该命令专门用于插入纯文本，不会触发浏览器的HTML解析逻辑，确保<pre>内只保留纯文本换行
• 直接绑定目标元素事件：避免事件委托带来的重复绑定问题，确保事件只在需要的元素上触发
• 处理粘贴事件：防止粘贴带格式的内容时自动生成<br>或其他HTML标签，保持代码块纯净

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