富文本编辑器(wangEditor 5)

一、链接 

wangEditor

二、基础

import '@wangeditor/editor/dist/css/style.css'; // 引入 css

import React, { useState, useEffect } from 'react';
import { Editor, Toolbar } from '@wangeditor/editor-for-react';
import { IDomEditor, IEditorConfig, IToolbarConfig } from '@wangeditor/editor';

function MyEditor() {
  // editor 实例
  //   const [editor, setEditor] = (useState < IDomEditor) | (null > null); // TS 语法
  const [editor, setEditor] = useState(null); // JS 语法

  // 编辑器内容
  const [html, setHtml] = useState(null);

  // 模拟 ajax 请求,异步设置 html
  //   useEffect(() => {
  //     setTimeout(() => {
  //       setHtml('<p>hello world</p>');
  //     }, 1500);
  //   }, []);

  // 工具栏配置
  //   const toolbarConfig: Partial<IToolbarConfig> = {}; // TS 语法
  const toolbarConfig = {}; // JS 语法

  // 编辑器配置
  //   const editorConfig: Partial<IEditorConfig> = {
  // TS 语法
  const editorConfig = {
    // JS 语法
    placeholder: '请输入内容...',
    MENU_CONF: {},
  };
  // base64 插入图片
  editorConfig.MENU_CONF['uploadImage'] = {
    // 其他配置...

    // 小于该值就插入 base64 格式(而不上传),默认为 0
    base64LimitSize: 5 * 1024 * 1024, // 5M
  };

  // 及时销毁 editor ,重要!
  useEffect(() => {
    return () => {
      if (editor == null) return;
      editor.destroy();
      setEditor(null);
    };
  }, [editor]);

  return (
    <>
      <div style={{ border: '1px solid #ccc', zIndex: 100, width: '500px' }}>
        <Toolbar
          editor={editor}
          defaultConfig={toolbarConfig}
          mode="default"
          style={{ borderBottom: '1px solid #ccc', width: '500px' }}
        />
        <Editor
          defaultConfig={editorConfig}
          value={html}
          onCreated={setEditor}
          onChange={editor => setHtml(editor.getHtml())}
          mode="default"
          style={{ height: '500px', overflowY: 'hidden', width: '500px' }}
        />
      </div>
      <div style={{ marginTop: '15px' }}>{html}</div>
    </>
  );
}

export default MyEditor;

根据提供的代码,可以看出你正在使用 @wangeditor/editor-for-react 库来实现富文本编辑器。这个库为 React 提供了一些组件,可以很方便地集成 WangEditor 富文本编辑器。

在代码中,首先引入了 @wangeditor/editor/dist/css/style.css 文件,用于引入样式。

然后定义了一个名为 MyEditor 的函数组件。在该组件中,使用了 React 的 useStateuseEffect 钩子来管理编辑器实例和编辑器内容。

MyEditor 组件中,使用了 ToolbarEditor 组件来渲染富文本编辑器的工具栏和编辑区域。通过 editorsetEditor 状态来保存和更新编辑器实例。通过 htmlsetHtml 状态来保存和更新编辑器的内容。

useEffect 钩子中,使用了模拟的异步请求来设置编辑器的初始内容。你可以根据实际需求修改这部分逻辑。

同时,还定义了 toolbarConfigeditorConfig 来配置工具栏和编辑器的属性。

最后,通过返回 JSX 元素来渲染编辑器和展示编辑器内容的部分。

需要注意的是,在组件销毁时,通过 useEffect 钩子的清理函数,及时销毁编辑器实例,避免内存泄漏。

如果需要显示编辑器的内容,可以取消注释 <div style={{ marginTop: '15px' }}>{html}</div> 这一行代码。

请确保已正确安装所需的依赖,并根据实际需要进行调整和修改。

三、类组件写法

当将函数组件转换为类组件时,需要使用 class 关键字定义一个继承自 React.Component 的类,并实现 render 方法来返回组件的 JSX 结构。同时,需要使用 this.statethis.setState 来管理组件的状态。

以下是将上面的函数组件改写为类组件的示例:

import React from 'react';
import { Editor, Toolbar } from '@wangeditor/editor-for-react';
import { IDomEditor, IEditorConfig, IToolbarConfig } from '@wangeditor/editor';

class MyEditor extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      editor: null,
      html: null,
    };
  }

  componentDidMount() {
    // 模拟 ajax 请求,异步设置 html
    setTimeout(() => {
      this.setState({ html: '<p>hello world</p>' });
    }, 1500);
  }

  componentWillUnmount() {
    const { editor } = this.state;
    if (editor) {
      editor.destroy();
      this.setState({ editor: null });
    }
  }

  render() {
    const { editor, html } = this.state;
    const toolbarConfig = {};
    const editorConfig = {
      placeholder: '请输入内容...',
    };

    return (
      <>
        <div style={{ border: '1px solid #ccc', zIndex: 100 }}>
          <Toolbar
            editor={editor}
            defaultConfig={toolbarConfig}
            mode="default"
            style={{ borderBottom: '1px solid #ccc' }}
          />
          <Editor
            defaultConfig={editorConfig}
            value={html}
            onCreated={(editor) => this.setState({ editor })}
            onChange={(editor) => this.setState({ html: editor.getHtml() })}
            mode="default"
            style={{ height: '500px', overflowY: 'hidden' }}
          />
        </div>
        {/* <div style={{ marginTop: '15px' }}>{html}</div> */}
      </>
    );
  }
}

export default MyEditor;

在类组件中,我们使用了 constructor 方法来初始化状态,并且在 componentDidMount 生命周期方法中模拟了异步请求来设置编辑器的初始内容。同时,在 componentWillUnmount 生命周期方法中及时销毁编辑器实例。

其余部分与函数组件的逻辑基本保持一致,只是需要使用 this.statethis.setState 来管理状态。

  • 11
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值