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
  1

• 打开 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 );
      } );
  }
  1
  2
  3
  4
  5
  6

  上面是原代码，调整为下面的代码，其实就是加了个 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 );
          }
      });
  }
  1
  2
  3
  4
  5
  6
  7
  8
  9

• 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;
  }
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24
  25
  26
  27
  28
  29
  30
  31
  32
  33
  34
  35
  36
  37
  38

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