enabled prev trigge decorator ntc val locale layout xtend

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

react-draft-wysiwyg富文本