CKEditor 5复制内容时自动移除换行问题咨询

这问题我之前帮好几个开发者排查过，CKEditor 5经典构建的这个行为其实是默认粘贴过滤器在起作用，咱一步步拆解原因和解决办法：

问题根源 #

记事本里的换行是单个换行符（\n），但在HTML的排版逻辑里，单个换行只会被渲染成空格——只有段落标签（<p>）或换行标签（<br>）才能显示出换行效果。

CKEditor 5的默认纯文本粘贴规则是：

• 把连续两个换行识别为段落分隔，自动转换成<p>标签；
• 把单个换行替换成空格，这是为了适配大多数Web内容的排版习惯（毕竟很多纯文本里的换行只是为了显示方便，并非真正的段落或换行需求）。

你复制的每行1、2、3都是单个换行分隔，所以自然会被合并成「1 2 3」。

解决办法 #

根据你的需求，有两种常用调整方式：

1. 永久修改编辑器配置（推荐） #

如果你需要所有从记事本这类纯文本来源粘贴的内容都保留换行，可以修改编辑器的pasteFilter配置，自定义文本处理规则：

选项A：把单个换行转换成<br>标签

这样每行内容会在同一段落内换行，适合不需要分段的场景：

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        pasteFilter: {
            rules: {
                text: ( text ) => {
                    // 匹配单个换行（前后不是换行符），替换成<br>
                    return text.replace( /(?<!\n)\n(?!\n)/g, '<br>' );
                }
            }
        }
    } )
    .catch( error => {
        console.error( error );
    } );

选项B：把单个换行转换成段落分隔

如果希望每行都成为独立段落，只需把单个换行替换成两个换行（CKEditor会自动识别为段落）：

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        pasteFilter: {
            rules: {
                text: ( text ) => {
                    // 把所有单个换行替换成两个换行
                    return text.replace( /\n/g, '\n\n' );
                }
            }
        }
    } )
    .catch( error => {
        console.error( error );
    } );

2. 临时手动处理（适合偶尔需求） #

如果只是偶尔需要保留换行，粘贴时可以先把文本粘贴到编辑器后，选中内容，用编辑器工具栏的「换行」按钮手动添加，或者使用Ctrl+Enter（Windows）/Cmd+Enter（Mac）在每行末尾插入<br>。

补充说明 #

CKEditor 5的默认粘贴行为是经过产品设计考量的，目的是避免纯文本里的软换行破坏Web内容的排版结构。但如果你的业务场景确实需要严格保留纯文本的换行格式，修改pasteFilter配置就能完美解决问题。

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