富文本编辑器 braft-editor在不同浏览器下粘贴格式不一致解决方案

谷歌浏览器下

谷歌翻译

将翻译内容复制粘贴至富文本编辑器,测试地址: https://braft.margox.cn/demos/basic

火狐浏览器下

谷歌翻译

复制粘贴内容到富文本编辑器,神奇的事情发生了

对比两个浏览器下输出值

1.火狐浏览器下的粘贴过来的内容

// 输出内容
<p>business numberNumber of free mailboxes/yearPlatform charge timeMail charge management</p>

2.谷歌浏览下粘贴过来的内容

// 输出内容
<p>business number</p><p>Number of free mailboxes/year</p><p>Platform charge time</p><p>Mail charge management</p>

解决方案

// 对应handlePastedText 源码
export const pastedTextHandlers = (text, html, editorState, editor) => {
  if (
    editor.editorProps.handlePastedText &&
    editor.editorProps.handlePastedText(text, html, editorState, editor) ===
      'handled'
  ) {
    return 'handled';
  }

  if (!html || editor.editorProps.stripPastedStyles) {
    return false;
  }

  const tempColors = ColorUtils.detectColorsFromHTMLString(html);

  editor.setState(
    {
      tempColors: [...editor.state.tempColors, ...tempColors]
        .filter((item) => editor.editorProps.colors.indexOf(item) === -1)
        .filter((item, index, array) => array.indexOf(item) === index),
    },
    () => {
      editor.setValue(ContentUtils.insertHTML(editorState, html, 'paste'));
    },
  );

  return 'handled';
};

但是发现并不适用,用handlePastedText获取到的html参数为undefined,无法对格式进一步处理.
发现官方文档提供了一个API属性 : stripPastedStyles
文档地址: BraftEdtior属性
详情：

属性名	类型	说明
stripPastedStyles	Boolean	是否以纯文本模式粘贴内容，默认为false

将stripPastedStyles设为true问题解决

显示效果

快乐终于回来了