react @17.0.0 富文本Wangeditor

最新推荐文章于 2024-07-29 19:26:43 发布

小鱼小鱼起来码码

最新推荐文章于 2024-07-29 19:26:43 发布

阅读量192

点赞数

分类专栏： react 文章标签： react.js npm typescript

本文链接：https://blog.csdn.net/weixin_41398468/article/details/125280636

版权

本文介绍了如何在React 17.0.0项目中集成Wangeditor，通过npm安装并封装成可复用组件。配置文件详细说明，动态设置编辑器ID以满足不同场景需求。

摘要由CSDN通过智能技术生成

安装Wangeditor，官方文档地址：http://www.wangeditor.com/
```
npm install wangeditor
```
安装成功后就可以使用了。因为这个功能可能会很多地方使用，所以封装成一个组件。

创建一个文件夹

index.tsx文件

import React, { useState, useEffect } from 'react';
import E from 'wangeditor';
import DefultData from './editor';

interface IProps {
  WangeditorID: any; //富文本id
  value?: any;
}
const WangeditorComponent: React.FC<IProps> = (props: IProps) => {
  // const WangeditorComponent: React.FC = (props:any) => {

  let editor: any = null;

  const { value, WangeditorID } = props;

  useEffect(() => {
    // 注：class写法需要在componentDidMount 创