【其他】React 项目集成富文本编辑器 wangEditor

背景 :

react后台管理系统集成富文本编辑器组件 wangEditor , 含图片及视频自定义上传功能

vue版本集成可见 :https://blog.csdn.net/qq_45481971/article/details/127300452?spm=1001.2014.3001.5501

代码 :

安装

yarn add @wangeditor/editor
# 或者 npm install @wangeditor/editor --save

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

富文本编辑器 子组件

其中 uploadFunc 是上传文件的接口, 这里用的是分片上传, 代码可见 : https://blog.csdn.net/qq_45481971/article/details/130577376?spm=1001.2014.3001.5501

import '@wangeditor/editor/dist/css/style.css' // 引入 css
import React, {
    
     useState, useEffect, useImperativeHandle } from 'react'
import {
    
     Editor, Toolbar } from '@wangeditor/editor-for-react'
import {
    
     Button } from 'antd'
import PropTypes from 'prop-types'
import {
    
     uploadFunc } from '../../common/uploadFunc'

// richtextData - 父组件传入的富文本初始化数据
// disabled - 父组件传入的控制编辑器是否只读
// onChangeText - 父组件传入的事件, 监听html值
const TextEditor = ({
     
      richtextData,disabled,dispatch, onChangeText },ref) => {
    
    

  // 父组件提交数据时重置html
  useImperativeHandle(ref, () => ({
    
     clearHtml }))
  const clearHtml = () => {
    
    
    console.log('重置html')
    setHtml('')
  }
  const [editor, setEditor] = useState(null)

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

  // const toolbar = DomEditor.getToolbar(editor)

  // console.log(toolbar,'toolbar')  // config查看工具栏配置

  // 模拟 ajax 请求，异步设置 html
  /* useEffect(() => {
    // setTimeout(() => {
    setHtml('<div></div>')
    // }, 1500)
  }, []) */

  // 获取html
  const getText = val => {
    
    
    onChangeText({
    
     val })
  }

  // 工具栏配置
  const toolbarConfig = {
    
    
    excludeKeys: [
      'blockquote',
      'todo',
      'emotion',
      'insertLink',
      'insertTable',
      'codeBlock',
      'fullScreen',
    ],
  }
  // 编辑器配置
  const editorConfig = {
    
    
    // JS 语法
    placeholder: '请输入内容...',
    MENU_CONF: {
    
    }, //上传图片时设置一个空对象
    readOnly: disabled,
  }

  if (editorConfig.MENU_CONF) {
    
    
    ;(editorConfig.MENU_CONF['uploadImage'] = {
    
    
      server: '/api/upload',
      // 最多可上传几个文件，默认为 100
      maxNumberOfFiles: 10,
      // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
      allowedFileTypes: ['image/*'],
      // 将 meta 拼接到 url 参数中，默认 false
      metaWithUrl: false,
      // 跨域是否传递 cookie ，默认为 false
      withCredentials: true,
      // 超时时间，默认为 10 秒
      timeout: 5 * 1000, // 5 秒
      // 自定义上传
      async customUpload(file, insertFn) {
    
    
        const suffixs = ['jpg', 'jpeg', 'png']
        const usage = 'picture'
        // 此处是上传到服务器接口
        uploadFunc(file, suffixs, usage, insertFn)
      },
    }),
      (editorConfig.MENU_CONF['uploadVideo'] = {
    
    
        // 最多可上传几个文件，默认为 100
        server: '/api/upload',
        maxNumberOfFiles: 10,
        // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
        allowedFileTypes: ['video/*'],
        // 将 meta 拼接到 url 参数中，默认 false
        metaWithUrl: false,
        // 跨域是否传递 cookie ，默认为 false
        withCredentials: true,
        // 超时时间，默认为 10 秒
        timeout: 5 * 1000, // 5 秒
        // 自定义上传
        async customUpload(file, insertFn) {
    
    
          const suffixs = ['mp4']
          const usage = 'video'
          uploadFunc(file, suffixs, usage, insertFn)
        },
      })
  }

  return (
    <div>
      <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={
    
    setEditor}
          onChange={
    
    editor => getText(editor.getHtml())}
          mode="default"
          style={
    
    {
    
     height: '500px', overflowY: 'hidden' }}
          className={
    
    styles.editor}
        />
      </div>
      // 此处可以获取到html富文本值
      {
    
    /* <div style={
    
    { marginTop: '150px' }}>{html}</div> */}
    </div>
  )
}

export default React.forwardRef(TextEditor)
// export default TextEditor

父组件 (部分代码)

  const textEditorComRef = React.createRef(null)
  
  // 清除编辑器内容
  textEditorComRef.current.clearHtml()

  <TextEditor
     disabled={
    
    editType == 'view' ? true : false}
     ref={
    
    textEditorComRef}
     richtextData={
    
    richtextData}
     onChangeText={
    
    onChangeText}
  />