brafteditor防抖_BRAFT EDITOR富文本编辑器

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: '

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 (

label="请输入主标题:"

{...formItemLayout}

>

{getFieldDecorator('title', {

rules: [{

required: true, message: '请输入主标题名称',

}]

})(

)}

label="摘要:"

{...formItemLayout}

>

{getFieldDecorator('zhaiyao', {

rules: [{

required: true, message: '限制200个字',

}],

})(

)}

label="封面图片:"

{...formItemLayout}

>

{/* {getFieldDecorator('image', {

rules: [{

required: true, message: '请上传封面图片',

}]

})( */}

{this.state.imageUrl ? : null}

{this.state.imageUrl ? null : }

{/* )} */}

{this.state.isShow ?

请上传封面图片

: null}

label="文章标签:"

{...formItemLayout}

>

{getFieldDecorator('biaoqian', {

initialValue: this.state.biaoqian

})(

new

hot

)}

label="内容编辑器:"

{...formItemLayout}

>

{getFieldDecorator('content', {

validateTrigger: 'onBlur',

rules: [

{ required: true },

{

validator: (rule, value, callback) => {

if (value.isEmpty()) {

callback('请输入正文内容')

} else {

callback()

}

}

}

]

})(

//

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 => {

})

}

}}

/>

)}

每5分钟保存一次

保存

预览

)

}

}

const WrappedEditForm = Form.create()(EditForm);

export default WrappedEditForm