wangEditor for React

介绍

基于wangEditor-next 封装的React组件。

安装

1. 安装组件包

pnpm add @wangeditor-next/editor-for-react
# 或者npm install @wangeditor-next/editor-for-react --save

2. 安装核心包

pnpm add @wangeditor-next/editor

# 或者 npm install @wangeditor-next/editor --save

3. 导入组件

import { Editor, Toolbar } from '@wangeditor-next/editor-for-react'

使用

详情参考wangEditor react使用文档。

Editor 内置 loading

为避免外层 Spin/Loader 包裹导致编辑器节点结构变化，可直接使用内置 loading 覆盖层：

<Editor
  defaultConfig={editorConfig}
  onChange={setEditorState}
  loading={uploading}
  loadingText="Uploading..."
/>

loading 只控制可视化遮罩，不会重建 editor 实例。

在Next.js下使用

import dynamic  from 'next/dynamic'
const WangEditor = dynamic(
  // 引入对应的组件 设置的组件参考上面的wangEditor react使用文档
  () => import('../components/myEditor'),
  {ssr: false}
)

export default function Home() {
  return <WangEditor />
}

使用案例可以参考wangeditorV5-nextjs-demo