react hook 使用百度富文本编辑器ueditor

一、基础环境搭建

dom路由引入

npm install react-router-dom --save-dev //这里可以使用cnpm代替npm命令

antd引入

antd npm install antd --save

二、引入ueditor

打开官网ueditor官网

https://github.com/fex-team/ueditor#ueditor

看下图下载，并解压出来

 目录结构如下：

 然后在此文件打开命令窗口

//如果电脑没有安装grunt 执行以下第一个命令
npm install grunt -g
//然后给ueditor安装依赖
npm install
//再执行
grunt default

成功的命令窗口

 此时文件目录如下图

 然后把dist文件下的目录 utf8-php 复制到react项目里的public文件夹里，并改名为ueditor

 然后在项目的public的index.html引入以下代码

//上面的如果识别不了中文可以改引入以下代码

 封装ueditor组件

import React, {useEffect,useImperativeHandle,forwardRef} from 'react'
let editor = null
 
const UEditor = (props,ref) => {
    useEffect(() => {
        setConfig(props.initData,props.config,props.setContent)
        return ()=>{
            editor.destroy();
            // editor.removeListener(); //不要打开，否则返回有问题报错
        }
    },[props.initData,props.config,props.setContent])
    // 初始化编辑器
    const setConfig = (initData,config,setContent) => {
        editor = window.UE &&window.UE.getEditor('editor', {
            // enableAutoSave: false,
            // autoHeightEnabled: false,
            autoFloatEnabled: false,
            initialFrameHeight: (config&&config.initialFrameHeight) || 450,
            initialFrameWidth: (config&&config.initialFrameWidth) || '100%',
            zIndex: 1,

        })
        editor.ready(() => {
            if(initData){
                editor.setContent(initData)  //设置默认值/表单回显
            }
        })
        editor.addListener("blur",function(){
            setContent(editor.getContent())
        });
    }
    useImperativeHandle(ref,()=>({
        getUEContent: ()=> {
            return editor.getContent() //获取编辑器内容
        }
    }))
    return (