如何让CKEditor 5正确插入带段落格式的复制文本？

我明白你遇到的问题——默认情况下CKEditor 5粘贴文本时会把原本的段落结构合并，丢失换行，导致内容格式混乱。下面是几种可行的解决方案，你可以根据自己的使用场景选择：

方法1：调整粘贴过滤器配置 #

CKEditor 5的pasteFilter配置可以控制粘贴内容的处理规则，如果你希望保留完整的段落结构，可以将过滤器设置为允许保留语义化内容，避免过度规范化：

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        // 允许保留段落、换行等语义化内容
        pasteFilter: 'semantic-content',
        // 若需要更宽松的格式支持，也可使用 'basic-content'
        // pasteFilter: 'basic-content',
    } )
    .catch( error => {
        console.error( error );
    } );

方法2：自定义粘贴事件处理器 #

如果默认配置不够灵活，你可以监听编辑器的paste事件，手动处理粘贴内容，把纯文本中的换行转换成标准段落：

ClassicEditor
    .create( document.querySelector( '#editor' ) )
    .then( editor => {
        editor.model.document.on( 'paste', ( evt, data ) => {
            const plainText = data.dataTransfer.getData( 'text/plain' );
            if ( plainText ) {
                // 将连续换行识别为段落分隔符，过滤空内容
                const paragraphs = plainText.split( /\n\n+/ ).filter( p => p.trim() );
                // 构建编辑器可识别的段落模型
                const fragment = editor.model.change( writer => {
                    const frag = writer.createDocumentFragment();
                    paragraphs.forEach( para => {
                        const p = writer.createElement( 'paragraph' );
                        writer.insertText( para.trim(), p );
                        writer.append( p, frag );
                    } );
                    return frag;
                } );
                // 插入处理后的内容并阻止默认粘贴行为
                editor.model.insertContent( fragment );
                evt.stop();
            }
        } );
    } )
    .catch( error => {
        console.error( error );
    } );

这个方法会把粘贴文本中两个及以上连续换行识别为段落分隔，转换成<p>标签插入，完美还原原有的段落结构。

方法3：针对Office文档复制的优化 #

如果你主要从Word、Excel等Office软件复制内容，确保已启用PasteFromOffice插件，并配置它保留段落结构：

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [ PasteFromOffice, /* 其他你需要的插件 */ ],
        pasteFromOffice: {
            keepParagraphs: true, // 强制保留Office文档中的段落结构
            preserveStyles: false // 若不需要保留原文档样式，可设为false
        }
    } )
    .catch( error => {
        console.error( error );
    } );

注意：不同CKEditor 5版本的配置项可能略有差异，建议对照你使用版本的官方文档调整细节。

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