• 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={{ 20, height: 20 }} /><label style={{ marginRight: 40 }}>new</label>
    <Radio name='feel' value='hot' style={{ 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
  • 相关阅读:
    leetCode 53. maximum subarray
    leetcode strStr()
    DCNN models
    1*1 的卷积核
    leetcode 14. longest common prefix
    springMVC接受json并打开新页面
    jsp取addFlashAttribute值深入理解即springMVC发redirect传隐藏参数
    hive安装教程本地模式
    poi excel超出65536行数限制自动扩展Invalid row number (65536) outside allow
    java 构造json对象数组
  • 原文地址:https://www.cnblogs.com/xufeimei/p/9804659.html
Copyright © 2020-2023  润新知