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