react-draft-wysiwyg富文本-白红宇

react-draft-wysiwyg富文本

阅读量：4634 次

发布时间：2019-06-09

本文共 4634 字，大约阅读时间需要 15 分钟。

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