富文本编辑器wangeditor+react

PairsNightRain

已于 2022-07-20 17:02:52 修改

阅读量439

点赞数

文章标签： react.js 前端编辑器

于 2022-06-30 16:13:14 首次发布

本文链接：https://blog.youkuaiyun.com/qq_37161741/article/details/125542630

版权

本文介绍如何在React项目中集成wangeditor 4.7.9，以在复制粘贴Excel和Word内容时保留颜色样式。在某些环境下，从本地Excel复制的内容可以保持样式，但在云桌面环境中则无法。文章包括子组件editor.js、父组件index.js以及样式文件index.less的相关代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

目前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.checkDataIn

最低0.47元/天解锁文章