CKEditor5 支持 WPS 贴贴文字图片，默认贴贴进入空白空格

一、简介

现在国内用 WPS 的人很多，有时候文档编辑好了，想直接贴贴到 CKEditor 编辑中，发现贴贴进去之后都是空格符号，显示空白的，无法识别内容，这个是 WPS 跟 Office 的格式问题。
想要支持 WPS 解析，那就必须要会自定义编辑器，自定义编辑器步骤很简单并不难，然后官方提供了 Office 的解析插件 @ckeditor/ckeditor5-paste-from-office，现在只需要在这个插件的基础上加上 WPS 的解析代码，然后打包生成一个自定义编辑器，导入使用即可。

二、操作步骤

按照下面调整完成之后， WPS 与 Office 都可以支持贴贴。
在自定义编辑过程中，看项目中是否已经安装好了 @ckeditor/ckeditor5-paste-from-office，一般默认编辑器是有的，所以直接去找到 node_modules/@ckeditor/ckeditor5-paste-from-office 文件夹即可。
```
$ npm install --save-dev @ckeditor/ckeditor5-paste-from-office
```
打开 ckeditor5-paste-from-office/src/filters 文件夹，调整过滤代码。

space.js 文件调整，这个是支持文字的。

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

上面是原代码，调整为下面的代码，其实就是加了个 if 判断，其他代码没变。

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

image.js 文件调整，这个是支持 WPS 图片的。

只需要添加 if (!images) {} 这段代码放到 if (images) {} 之前即可。

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 = [];

    // 针对 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;
}

调整好代码之后，按照自定义编辑器进行打包使用。