CKEditor5复制WPS word内容显示空白空格的问题

我爱模版网在使用CKEditor5时，从wps中拷贝内容到编辑器中，发现全是空白空格，内容无法展示出来。一翻百度后，按照下面的方法解决了这个问题：

1、如果您已经安装了ckeditor5，那么按照下面的方法继续，如果没有，可以看下这篇文章vue3使用ck-editor5，亲测可用。

2、如果您在安装ckeditor5时，没有安装 Paste From Office 插件，可以访问官方提供的工具，按照vue3使用ck-editor5，亲测可用提供的方法，重新自定义，勾选Paste From Office 插件，然后下载下来，npm install，安装依赖。

3、将CKEDITOR5项目的node_modules里的ckeditor5-paste-from-office复制出来，放到src目录的plugins（这里您可以根据需求自己定义文件夹）：

4、打开src/ckeditor.js，重写依赖地址：

5、修改源码，在ckeditor5-paste-from-office/src/filters目录找到space.js，做如下修改

将：

export function normalizeSpacing( htmlString ) {
    // Run normalizeSafariSpaceSpans() two times to cover nested spans.
    return normalizeSafariSpaceSpans( normalizeSafariSpaceSpans( htmlString ) )
        // Remove all \r\n from "spacerun spans" so the last replace line doesn't strip all whitespaces.
        .replace( /(<span\s+style=['"]mso-spacerun:yes['"]>[^\S\r\n]*?)[\r\n]+([^\S\r\n]*<\/span>)/g, '$1$2' )
        .replace( /<span\s+style=['"]mso-spacerun:yes['"]><\/span>/g, '' )
        .replace( / <\//g, '\u00A0</' )
        .replace( / <o:p><\/o:p>/g, '\u00A0<o:p></o:p>' )
        // Remove <o:p> block filler from empty paragraph. Safari uses \u00A0 instead of &nbsp;.
        .replace( /<o:p>(&nbsp;|\u00A0)<\/o:p>/g, '' )
        // Remove all whitespaces when they contain any \r or \n.
        .replace( />([^\S\r\n]*[\r\n]\s*)</g, '><' );
}

修改为：

export function normalizeSpacing( htmlString ) {
    // Run normalizeSafariSpaceSpans() two times to cover nested spans.
    return normalizeSafariSpaceSpans( normalizeSafariSpaceSpans( htmlString ) )
        // Remove all \r\n from "spacerun spans" so the last replace line doesn't strip all whitespaces.
        .replace( /(<span\s+style=['"]mso-spacerun:yes['"]>[^\S\r\n]*?)[\r\n]+([^\S\r\n]*<\/span>)/g, '$1$2' )
        .replace( /<span\s+style=['"]mso-spacerun:yes['"]><\/span>/g, '' )
        .replace( / <\//g, '\u00A0</' )
        .replace( / <o:p><\/o:p>/g, '\u00A0<o:p></o:p>' )
        // Remove <o:p> block filler from empty paragraph. Safari uses \u00A0 instead of &nbsp;.
        .replace( /<o:p>(&nbsp;|\u00A0)<\/o:p>/g, '' )
        // Remove all whitespaces when they contain any \r or \n.
        .replace( />([^\S\r\n]*[\r\n]\s*)</g, '><' )
        // 针对WPS的修改，去除空格
        .replace( />(\s+)</g, '><' );
}

将：

export function normalizeSpacerunSpans( htmlDocument ) {
    htmlDocument.querySelectorAll( 'span[style*=spacerun]' ).forEach( el => {
        const innerTextLength = el.innerText.length || 0;
 
        el.innerText = Array( innerTextLength + 1 ).join( '\u00A0 ' ).substr( 0, innerTextLength );
    } );
}

修改为：

export function normalizeSpacerunSpans( htmlDocument ) {
    htmlDocument.querySelectorAll( 'span[style*=spacerun]' ).forEach( el => {
        // 针对 wps 添加的判断
        if ( el.childNodes[ 0 ] && el.childNodes[ 0 ].data ) {
            const innerTextLength = el.innerText.length || 0;
            el.innerText = Array( innerTextLength + 1 ).join( '\u00A0 ' ).substr( 0, innerTextLength );
        }
    } );
}

6、在ckeditor5-paste-from-office/src/filters目录找到image.js，做如下修改

将：

function extractImageDataFromRtf( rtfData ) {
    if ( !rtfData ) {
        return [];
    }
 
    const regexPictureHeader = /{\\pict[\s\S]+?\\bliptag-?\d+(\\blipupi-?\d+)?({\\\*\\blipuid\s?[\da-fA-F]+)?[\s}]*?/;
    const regexPicture = new RegExp( '(?:(' + regexPictureHeader.source + '))([\\da-fA-F\\s]+)\\}', 'g' );
    const images = rtfData.match( regexPicture );
    const result = [];
 
    if ( images ) {
        for ( const image of images ) {
            let imageType = false;
 
            if ( image.includes( '\\pngblip' ) ) {
                imageType = 'image/png';
            } else if ( image.includes( '\\jpegblip' ) ) {
                imageType = 'image/jpeg';
            }
 
            if ( imageType ) {
                result.push( {
                    hex: image.replace( regexPictureHeader, '' ).replace( /[^\da-fA-F]/g, '' ),
                    type: imageType
                } );
            }
        }
    }
 
    return result;
}

修改为：

function extractImageDataFromRtf( rtfData ) {
    if ( !rtfData ) {
        return [];
    }
 
    let regexPictureHeader = /{\\pict[\s\S]+?\\bliptag-?\d+(\\blipupi-?\d+)?({\\\*\\blipuid\s?[\da-fA-F]+)?[\s}]*?/;
    let regexPicture = new RegExp( '(?:(' + regexPictureHeader.source + '))([\\da-fA-F\\s]+)\\}', 'g' );
    let images = rtfData.match( regexPicture );
    const result = [];
 
    // 针对 wps 添加的判断
    if ( !images ) {
        regexPictureHeader = /{\\pict[\s\S]+?(\\pngblip-?\d+)?(\\wmetafile8-?\d+)?{\\\*\\blipuid\s?[\da-fA-F]+[\s}]*?/;
        regexPicture = new RegExp( '(?:(' + regexPictureHeader.source + '))([\\da-fA-F\\s]+)\\}', 'g' );
        images = rtfData.match( regexPicture );
    }
 
    if ( images ) {
        for ( const image of images ) {
            let imageType = false;
 
            if ( image.includes( '\\pngblip' ) ) {
                imageType = 'image/png';
            } else if ( image.includes( '\\jpegblip' ) ) {
                imageType = 'image/jpeg';
            }
 
            if ( imageType ) {
                result.push( {
                    hex: image.replace( regexPictureHeader, '' ).replace( /[^\da-fA-F]/g, '' ),
                    type: imageType
                } );
            }
        }
    }
 
    return result;
}

重新执行：npm run build打包，将打包后的ckeditor.js重新引入项目中查看效果吧。