【前端】react hook 使用百度富文本编辑器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> -->

然后修改public里的ueditor文件的ueditor.config.js，如下图

toolbars的配置代码

// 工具栏上的所有的功能按钮和下拉框，可以在new编辑器的实例时选择自己需要的重新定义
    toolbars: [[
      'fullscreen', 'source', '|', 'undo', 'redo', '|',
      'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|',
      'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
      'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
      'directionalityltr', 'directionalityrtl', 'indent', '|',
      'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|',
      'link', 'unlink', 'anchor', '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|',
      'simpleupload', 'insertimage', 'emotion', 'scrawl', 'insertvideo', 'music', 'attachment', 'map', 'gmap', 'insertframe', 'insertcode', 'webapp', 'pagebreak', 'template', 'background', '|',
      'horizontal', 'date', 'time', 'spechars', 'snapscreen', 'wordimage', '|',
      'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols', 'charts', '|',
      'print', 'preview', 'searchreplace', 'drafts', 'help'
    ]],

封装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={{width:'750px'}} autoComplete="off" form={form} onFinish={onFinish}>
                <Item name="unit"  label="选择栏目：" rules={[{ required: true,message: '选择栏目必选' }]}>
                    <Select
                    placeholder="请选择选择栏目"
                    onChange={onGenderChange}
                    allowClear
                    style={{width:"200px"}}
                    >
                        <Option value="1">健康</Option>
                        <Option value="2">子女</Option>
                    </Select>
                </Item>
                <Item name="type"  label="首页推荐：" initialValue={1} rules={[{ required: true,message: '首页推荐必填' }]}>
                    <Radio.Group style={{width: '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

看看显示效果