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

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