react-draft-wysiwyg富文本
Posted xufeimei
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了react-draft-wysiwyg富文本相关的知识，希望对你有一定的参考价值。
import { EditorState, convertToRaw } from ‘draft-js‘;
import { Editor } from ‘react-draft-wysiwyg‘;
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
以上是关于react-draft-wysiwyg富文本的主要内容，如果未能解决你的问题，请参考以下文章