一、简介
- 现在国内用
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; }
- 调整好代码之后，按照 自定义编辑器 进行打包使用。
