wangEditor3 React 上传图片

最新推荐文章于 2024-03-27 11:34:44 发布

原创最新推荐文章于 2024-03-27 11:34:44 发布 · 620 阅读

0 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

17 篇文章

订阅专栏

本文介绍如何在React项目中安装并使用wangEditor3富文本编辑器，包括配置图片上传、监听变化及封装子组件的方法。

官网地址： https://www.kancloud.cn/wangfupeng/wangeditor3/332599

首先，在 React 项目中安装 wangEditor3 插件

npm install wangeditor

封装的子组件


import React, { PureComponent } from 'react'
import E from 'wangeditor'
import prefix from '../../config'

class Editor extends PureComponent {
  constructor(props) {
    super()
    this.state = {
      value: props.value,
    }
  }

  componentWillReceiveProps(nextProps) {
    if (this.props.value !== nextProps.value) {
      this.setState({
        value: nextProps.value,
      })
      this.onChange(nextProps.value)
    }
  }

  componentDidMount() {
    const { value, otherProps } = this.props
    this.editor = new E(this.editorDom)
    this.editor.customConfig = {
	    uploadImgServer: `${prefix}/image/upload`, // 上传图片到服务器
		uploadImgMaxSize: 2 * 1024 * 1024, // 将图片大小限制为 2M
		uploadImgHooks: {	
	    	customInsert: function (insertImg, result, editor) {
	      	result.data.map((item, i) => {
	        	var url = result.data[i].filePath
	        	insertImg(url)
	      	})
    },
  	},
    onchange: this.onChange,
	...otherProps,
    }
    this.editor.create()
    this.editor.txt.html(value)
  }
  componentDidUpdate(prevProps, prevState) {
    if ('value' in this.props && prevState.value !== this.state.value) {
      this.editor.txt.html(this.state.value || '')
    }
  }

  onChange = (html) => {
    const { onChange } = this.props
    if (onChange) onChange(html)
  }

  render() {
    return (
      <div
        ref={(node) => {
          this.editorDom = node
        }}
      />
    )
  }
}

export default Editor

父组件

import React, { Component } from 'react'
import Editor from 'components/Editor'

class Edit extends BaseComponent {
  state={
  	editor: ''
  }
  inputChangeHandler(val, key) {
    this.setState({
    	[key]:val
    })
  }
  render() {
    return (
	     <Editor onChange={(val) => this.inputChangeHandler(val, 'editor')}/>
    )
  }
}
export default Edit