ReactAntd(二十二) React-antd使用富文本

Antd - 使用 Ueditor 富文本

第一步 下载 Ue 放到 public 目录下

第二步 在 public 目录下面的 index.html 里面加载 Ue

• 必须按照顺序引入

• 路径可以改变,打包后必须修改路径

<script type="text/javascript" src="../Ueditor/ueditor.config.js"></script>
<script type="text/javascript" src="../Ueditor/ueditor.all.js"></script>
<script type="text/javascript" src="../Ueditor/lang/zh-cn/zh-cn.js"></script>

第三步 封装一个 rich 基础组件

import React from 'react'

export default class Editor extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      id: this.props.id || null,
      ueEditor: null,
    }
  }

  componentDidMount() {
    console.log(window)
    var UE = window.UE
    let { id } = this.state
    console.log(UE)
    console.log(id)
    if (id) {
      try {
        UE.delEditor(id)
      } catch (error) {}
      let ueEditor = UE.getEditor(id, {
        autoHeightEnabled: true,
        autoFloatEnabled: true,
        //字体大小
        fontsize: [10, 11, 12, 14, 16, 18, 20, 24, 36, 48],
        // 上传图片时后端提供的接口
        serverUrl: '',
        enableAutoSave: false,
        // eslint-disable-next-line no-dupe-keys
        autoHeightEnabled: false,
        initialFrameHeight: this.props.height,
        initialFrameWidth: '100%',
      })
      this.setState({ ueEditor })
      //判断有没有默认值
      ueEditor.ready((ueditr) => {
        var value = this.props.value ? this.props.value : '<p></p>'
        ueEditor.setContent(value)
      })
      //将文本回调回去
      ueEditor.addListener('selectionchange', (type) => {
        //console.log(ueEditor.getContent())
        this.props.callback(ueEditor.getContent())
      })

      //清空富文本内容
      //this.refs.ueditor.changeContent("");
    }
  }

  render() {
    let { id } = this.state
    return (
      <div>
        <textarea
          id={id}
          style={{ width: this.props.width, height: this.props.height }}
        ></textarea>
      </div>
    )
  }
}

第四部 引入基础组件

import React, { useState, useEffect } from 'react'
import Editor from './RichBasic.js'
import { Button } from 'antd'
function EditorComponent() {
  const [content, setcontent] = useState('')
  function EditorChange(value) {
    console.log(value)
    setcontent(value)
  }
  function handleClick() {
    window.alert(content)
  }
  return (
    <div>
      <Editor
        id={'container'}
        value={content}
        callback={(content) => EditorChange(content)}
        width="100%"
        height="780px"
      ></Editor>
      <Button type="primary" onClick={handleClick}>
        点击弹出用户输入的值
      </Button>
    </div>
  )
}

export default EditorComponent