react-draft-wysiwyg富文本

 

import { EditorState, convertToRaw } from 'draft-js';

import { Editor } from 'react-draft-wysiwyg';

import draftToHtml from 'draftjs-to-html';

import draftToMarkdown from 'draftjs-to-markdown';

import htmlToDraft from 'html-to-draftjs';

import '../../../node_modules/react-draft-wysiwyg/dist/react-draft-wysiwyg.css';

 

const content = { "entityMap": {}, "blocks": [{ "key": "637gr", "text": "", "type": "unstyled",

"depth": 0, "inlineStyleRanges": [], "entityRanges": [], "data": {} }] };

 

class EditForm extends React.Component {

constructor(props) {

super(props)

this.state = {

editorState: EditorState.createEmpty(),

contentState: content

}

}

onEditorStateChange = (editorState) => {

this.setState({

editorState,

});

};

onContentStateChange = (contentState) => {

this.setState({

contentState,

});

};

uploadImageCallBack = (info) => {

return new Promise(function (resolve, reject) {

let formData = new window.FormData()

formData.append('file', info, info.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

}

}

resolve(imgObj)

} else {

}

}, err => {

console.log('err', err)

})

})

}

handleSubmit = (e) => {

e.preventDefault();

const { editorState } = this.state;

this.props.form.validateFields((err, values) => {

if (!err) {

console.log(999,values)

const submitData = {

title: values.title,

zhaiyao:values.zhaiyao,

image:values.image,

biaoqian:values.biaoqian,

content: values.content.toHTML()// or values.content.toHTML()

}

console.log(submitData)

}

// values.content = draftToHtml(convertToRaw(editorState.getCurrentContent()))

// console.log(values)

})

}

 

render() {

 

const { getFieldDecorator } = this.props.form;

const { editorState, contentState } = 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>

<Uploading />

</div>

)}

</FormItem>

<FormItem

label="文章标签:"

{...formItemLayout}

>

{getFieldDecorator('biaoqian')(

<RadioGroup name="radiogroup" >

<Radio name='feel' value='new' style={{ width: 20, height: 20 }} /><label style={{ marginRight: 40 }}>new</label>

<Radio name='feel' value='hot' style={{ width: 20, height: 20 }} /><label>hot</label>

</RadioGroup>

)}

</FormItem>

<FormItem

label="内容编辑器:"

{...formItemLayout}

>

{getFieldDecorator('content', {

validateTrigger:'onBlur',

rules: [

{ required: true},

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

if (value.isEmpty()) {

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

} else {

callback()

}

}

}

]

})(

<Editor

editorState={editorState}

onEditorStateChange={this.onEditorStateChange}

onContentStateChange={this.onContentStateChange}

wrapperClassName="wrapper-class"

editorClassName="editor-class"

toolbarClassName="toolbar-class"

localization={{ locale: 'zh' }}

toolbar={{

image: {

previewImage: true,

uploadEnabled: true,

urlEnabled: true,

uploadCallback: this.uploadImageCallBack,

alt: { present: true, mandatory: true }

}

}}

/>

 

)}

</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'>预览</Button>

</div>

</Form>

{/* <div className='footerbox'>

<Button type='primary' key='submit' size='large' style={{marginRight:10,marginLeft:10}} className='save'>保存</Button>

<Button type='primary' size='large' onClick={()=>setPreviewType('publishCode2')}>预览</Button>

</div> */}

</div>

)

}

}

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

export default WrappedEditForm