react @17.0.0 富文本Wangeditor

最新推荐文章于 2024-01-18 14:50:29 发布

VIP文章小鱼小鱼起来码码

最新推荐文章于 2024-01-18 14:50:29 发布

阅读量140

点赞数

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

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

版权

安装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 创建编辑器
    ed