目前wangeditor已经到5.0版本,但是之前4.0版本能够做到复制粘贴excel和word文件时保留颜色样式文件,下面的代码基于

“wangeditor”: “^4.7.9”

(ps:项目环境在云桌面上运行代码,假如从本机excel复制文件到项目页面中是有颜色样式的,但是在云桌面里的excel里面复制的文件就不带样式,脑壳痛,为啥子。。。)

1、子组件editor.js

import Editor from './editor';
import { Form } from 'antd';
import React, { useState, useCallback } from 'react';

const TableEditor = props => {
  // const {  getFieldDecorator } = props.form;
  const onChange = newHtml => {
    var str=newHtml
    if(newHtml.includes('<table>')){
      str = newHtml.replace(/<table>/g, '<table border="1" width="100%" cellpadding="0">');
    }    
    console.log('aaa', str);
    if (window.parent != window) {
      window.parent.ReactAPI.getComponentAPI('Input')
        .APIs('checkreport.checkDataInfo')
        .setValue(str);
    }
  };
  return (
    <div>
      <Editor onChange={onChange} />
    </div>
  );
};
export default TableEditor;

2、父组件index.js

import E from 'wangeditor';
import { useEffect } from 'react';
import "./index.less"
/**
 * 这里用函数式组件
 */

let editor = null;
function App(props) {
  const { value, onChange } = props;

  useEffect(() => {
    // 注:class写法需要在componentDidMount 创建编辑器
    editor = new E('#div1');

    editor.config.onchange = newHtml => {
      onChange(newHtml);
    };
    editor.config.pasteFilterStyle = false; //复制粘贴携带样式
    // 需要展示的菜单
    editor.config.menus = [
      'head',
      'bold',
      'fontSize',
      'fontName',
      'italic',
      'underline',
      'strikeThrough',
      'indent',
      'lineHeight',
      'foreColor',
      'backColor',
      'link',
      'list',
      'todo',
      'justify',
      'quote',
      'emoticon',
      'image',
      'video',
      'table',
      'code',
      'splitLine',
      'undo',
      'redo',
    ];

    /**一定要创建 */
    editor.create();
    if (window.parent != window) {
      let text = window.parent.ReactAPI.getComponentAPI('Input')
        .APIs('checkreport.checkDataInfo')
        .getValue();
      console.log(text);
      editor.txt.html(text);
    }
    // let a='<p>sahfdlf</p>'
    // editor.txt.html('<div>kjlk</div>');
    return () => {
      // 组件销毁时销毁编辑器 注:class写法需要在componentWillUnmount中调用
      editor.destroy();
    };

    // 这里一定要加上下面的这个注释
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  useEffect(
    () => {
      if (editor) {
        editor.txt.html(value);
      }
    },
    [value],
  );

  return (
    <div>
      <div id="div1" />
    </div>
  );
}
export default App;

3、样式文件index.less

/* table 样式 */
table {
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
}
table td,
table th {
  border-bottom: 1px solid #ccc;
  border-right: 1px solid #ccc;
  padding: 3px 5px;
}
table th {
  border-bottom: 2px solid #ccc;
  text-align: center;
}

/* blockquote 样式 */
blockquote {
  display: block;
  border-left: 8px solid #d0e5f2;
  padding: 5px 10px;
  margin: 10px 0;
  line-height: 1.4;
  font-size: 100%;
  background-color: #f1f1f1;
}

/* code 样式 */
code {
  display: inline-block;
  *display: inline;
  *zoom: 1;
  background-color: #f1f1f1;
  border-radius: 3px;
  padding: 3px 5px;
  margin: 0 3px;
}
pre code {
  display: block;
}

/* ul ol 样式 */
ul, ol {
  margin: 10px 0 10px 20px;
}

4、大概长这个亚子
在这里插入图片描述

Logo

腾讯云面向开发者汇聚海量精品云计算使用和开发经验,营造开放的云计算技术生态圈。

更多推荐