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引入以下代码

<script type="text/javascript" src="/ueditor/ueditor.config.js"></script>
<script type="text/javascript" src="/ueditor/ueditor.all.js"></script>

//上面的如果识别不了中文可以改引入以下代码
<!-- <script src="/ueditor3/ueditor.config.js"></script>
     <script src="/ueditor3/ueditor.all.js"></script>
     <script src="/ueditor3/lang/zh-cn/zh-cn.js"></script>
     <script src="/ueditor3/ueditor.parse.min.js"></script> -->

 封装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 (
      <script id="editor" type="text/plain" />
    )
}
 
export default forwardRef(UEditor) 

组件的使用

import React,{useState,useRef} from 'react'
import UEditor from './UEditor' 
import './PublishArticle.less'
import {Form,Button,Input,message,Select,Radio} from 'antd'
const {Item} = Form
const { Option } = Select;
function PublishArticle() {
    const [form] = Form.useForm();
    const ueRef = useRef(null)
    const tailLayout = {
        wrapperCol: { offset: 10, span: 8 },
    };
    //选择栏目
    const onGenderChange = value => {
        console.log(value);
    };
    const [radioVal, setRadioVal] = useState(1)
    //编辑器的宽度
    const [config] = useState({
        initialFrameWidth: '100%',
        initialFrameHeight: 400
    })
    //编辑器的默认值
    const [initData] = useState('')
    //富文本失焦就触发setContent函数设置表单的content内容
    const setContent = (e)=>{
        form.setFieldsValue({
            content: ueRef.current.getUEContent()
        })
    }
     //发布
    const onFinish = (values) => {
        console.log(values);
        message.error('发布未成功')
    };
    return (
        <div className="PublishArticle-wrap">
            <div className="title">发布文章</div>
            <Form preserve={false}  style={{'750px'}} autoComplete="off" form={form} onFinish={onFinish}>
                <Item name="unit"  label="选择栏目：" rules={[{ required: true,message: '选择栏目必选' }]}>
                    <Select
                    placeholder="请选择选择栏目"
                    onChange={onGenderChange}
                    allowClear
                    style={{"200px"}}
                    >
                        <Option value="1">健康</Option>
                        <Option value="2">子女</Option>
                    </Select>
                </Item>
                <Item name="type"  label="首页推荐：" initialValue={1} rules={[{ required: true,message: '首页推荐必填' }]}>
                    <Radio.Group style={{ '200px'}} onChange={(e)=>setRadioVal(e.target.value)} value={radioVal}>
                        <Radio value={1} checked>关闭</Radio>
                        <Radio value={2}>开启</Radio>
                    </Radio.Group>
                </Item>
                <Item name="name"  label="文章标题：" rules={[{ required: true,message: '文章标题必填' }]}>
                    <Input placeholder="请输入文章标题" allowClear/>
                </Item>
                <Item name="content" label="文章内容:" initialValue={initData} rules={[{required: true,message: '文章内容必填' }]}>
                    <UEditor id="container" ref={ueRef} config={config} initData={initData} setContent={(e)=>setContent(e)}></UEditor>
                </Item>
                <Item {...tailLayout}>
                    <Button type="primary" htmlType="submit">发布</Button>
                </Item>
            </Form>
        </div>
    )
}

export default PublishArticle

 使用

App.cs 添加

@import '~antd/dist/antd.css

预览效果：