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