BRAFT EDITOR富文本编辑器
https://braft.margox.cn/demos/basic 官方文档
import React from 'react'
import Uploading from '../Upload/index'
// import FuWenBen from '../fuwenben/index'
import { Form, Input, Button, AutoComplete, Radio, Card, Dropdown, Menu, Icon, message } from 'antd';
import Axios from 'axios'
import './index.scss'
import { Link } from 'react-router-dom'
import { rule } from 'postcss';
import { inject, observer } from 'mobx-react'
// 引入编辑器以及EditorState子模块
import BraftEditor from 'braft-editor'
// 引入编辑器样式
import 'braft-editor/dist/index.css'
import { getArticleContentById } from '@/api/content'
import { router } from 'sw-toolbox';
const { TextArea } = Input;
const FormItem = Form.Item;
const RadioGroup = Radio.Group;
let timer;
@inject('editStore') @observer
class EditForm extends React.Component {
constructor(props) {
super(props)
this.state = {
searchParams: {},
editorState: '', // 设置编辑器初始内容
outputHTML: '<p></p>',
imageUrl: '',
biaoqian: '',
isShow: false,
id:''
}
}
changeImg = (url) => {
this.setState({
imageUrl: url,
isShow: false
})
}
handleSubmit = (e) => {
e.preventDefault();
const { editorState } = this.state;
let submitData = {}
this.props.form.validateFields((err, values) => {
if (!this.state.imageUrl.length) {
this.setState({
isShow: true
})
return
}
if (!err) {
submitData = {
title: values.title,
zhaiyao: values.zhaiyao,
image: this.state.imageUrl,
biaoqian: values.biaoqian,
content: values.content.toHTML()// or values.content.toHTML()
}
}
})
if (this.props.type == 'contentAdd') {
this.props.newAddArticleContent(submitData)
} else if (this.props.type == 'contentEdit') {
this.props.updateArticleContent(submitData)
}
clearInterval(timer)
}
getContentById = () => {
let { searchParams } = this.state
searchParams = {
id: this.props.id
}
getArticleContentById(searchParams).then(
res => {
if (res.data.code == 200) {
this.props.form.setFieldsValue({
title: res.data.data.title,
zhaiyao: res.data.data.brief,
content: BraftEditor.createEditorState(res.data.data.content)
})
this.setState({
imageUrl: res.data.data.imagePath,
biaoqian: String(res.data.data.articleTag),
isShow: false
})
this.props.editStore.editTitle(res.data.data.title)
}
}
).catch(
err => {
}
)
}
// look=()=>{
// this.props.editStore.previewArr(this.props.publishCode)
// }
componentDidMount() {
if(this.props.id){
this.getContentById()
}
// timer=setInterval(() => {
// let submitData = {}
// this.props.form.validateFields((err, values) => {
// if (!this.state.imageUrl.length) {
// this.setState({
// isShow: true
// })
// return
// }
// if (!err) {
// submitData = {
// title: values.title,
// zhaiyao: values.zhaiyao,
// image: this.state.imageUrl,
// biaoqian: values.biaoqian,
// content: values.content.toHTML()// or values.content.toHTML()
// }
// }
// })
// console.log(submitData)
// if (this.props.type == 'contentAdd') {
// this.props.newAddArticleContent(submitData)
// } else if (this.props.type == 'contentEdit') {
// this.props.updateArticleContent(submitData)
// }
// }, 5000)
}
componentWillReceiveProps(nextProps){
this.setState({
id:nextProps.id
})
}
render() {
const { setPreviewType } = this.props
const { getFieldDecorator } = this.props.form;
const { editorState, outputHTML } = this.state
const formItemLayout = {
labelCol: {
xs: { span: 24 },
sm: { span: 6 },
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 16 },
},
};
return (
<div>
<Form onSubmit={this.handleSubmit} className='container333'>
<FormItem
label="请输入主标题:"
{...formItemLayout}
>
{getFieldDecorator('title', {
rules: [{
required: true, message: '请输入主标题名称',
}]
})(
<Input placeholder="请输入主题" />
)}
</FormItem>
<FormItem
label="摘要:"
{...formItemLayout}
>
{getFieldDecorator('zhaiyao', {
rules: [{
required: true, message: '限制200个字',
}],
})(
<TextArea placeholder="限制200个字" autosize={{ minRows: 5, maxRows: 5 }} />
)}
</FormItem>
<FormItem
label="封面图片:"
{...formItemLayout}
>
{/* {getFieldDecorator('image', {
rules: [{
required: true, message: '请上传封面图片',
}]
})( */}
<div>
{this.state.imageUrl ? <Uploading changeImg={this.changeImg} imageUrl={this.state.imageUrl} /> : null}
{this.state.imageUrl ? null : <Uploading changeImg={this.changeImg} />}
</div>
{/* )} */}
</FormItem>
{this.state.isShow ? <p style={{marginLeft:'25%',marginTop:'-2%',color:'red'}}>请上传封面图片</p> : null}
<FormItem
label="文章标签:"
{...formItemLayout}
>
{getFieldDecorator('biaoqian', {
initialValue: this.state.biaoqian
})(
<RadioGroup name="radiogroup" >
<Radio name='feel' value={'1'} >new</Radio>
<Radio name='feel' value={'2'} >hot</Radio>
</RadioGroup>
)}
</FormItem>
<FormItem
label="内容编辑器:"
{...formItemLayout}
>
{getFieldDecorator('content', {
validateTrigger: 'onBlur',
rules: [
{ required: true },
{
validator: (rule, value, callback) => {
if (value.isEmpty()) {
callback('请输入正文内容')
} else {
callback()
}
}
}
]
})(
// <FuWenBen/>
<BraftEditor
height={0}
controls={
[
'undo', 'redo', 'split', 'font-size', 'font-family', 'line-height', 'letter-spacing',
'indent', 'text-color', 'bold', 'italic', 'underline', 'strike-through',
'superscript', 'subscript', 'remove-styles', 'emoji', 'text-align', 'split', 'headings', 'list_ul',
'list_ol', 'blockquote', 'code', 'split', 'link', 'split', 'hr', 'split', 'media', 'clear'
]
}
fontFamilies={
[
{
name: '宋体',
family: '"宋体",sans-serif'
}, {
name: '黑体',
family: '"黑体",serif'
}, {
name: '隶书',
family: '隶书'
},
{
name: '微软雅黑',
family: '微软雅黑'
},
{
name: '楷体',
family: '楷体'
},
{
name: 'Impact',
family: 'Impact,Charcoal'
}, {
name: 'Monospace',
family: '"Courier New", Courier, monospace'
}, {
name: 'Tahoma',
family: "tahoma, 'Hiragino Sans GB', sans-serif"
}]
}
media={{
uploadFn: (info) => {
let formData = new window.FormData()
formData.append('file', info.file, info.file.name)
Axios({
headers: {
'Content-Type': 'multipart/form-data'
},
method: 'post',
data: formData,
url: 'http://192.168.5.14:8081/node/file_upload'
}).then(res => {
if (res.data.code === 200) {
let imgurl = res.data.result[0].photoBig
let imgObj = {
data: {
link: 'http://192.168.5.14:8081/' + imgurl
}
}
info.success({
url: imgObj.data.link
// meta: {
// id: 'xxx',
// title: 'xxx',
// alt: 'xxx',
// loop: true, // 指定音视频是否循环播放
// autoPlay: true, // 指定音视频是否自动播放
// controls: true, // 指定音视频是否显示控制栏
// poster: 'http://xxx/xx.png', // 指定视频播放器的封面
// }
})
} else {
}
}, err => {
})
}
}}
/>
)}
</FormItem>
<div className='footer11'>
<div className='footer-right'>
每5分钟保存一次
</div>
</div>
<div className='footerbox'>
<Button type='primary' size='large' htmlType="submit" style={{ marginRight: 10, marginLeft: 10 }} className='save'>保存</Button>
<Button type='primary' size='large' onClick={this.look}><Link to={{pathname: '/home/preview',state:{id:this.state.id,type:'article',publishCode:this.props.publishCode}}}>预览</Link></Button>
</div>
</Form>
</div>
)
}
}
const WrappedEditForm = Form.create()(EditForm);
export default WrappedEditForm
