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 >
)
}
}
const WrappedEditForm = Form. create()( EditForm);
export default WrappedEditForm

转载于:https://www.cnblogs.com/xufeimei/p/9804659.html

你可能感兴趣的:(react-draft-wysiwyg富文本)