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
>
)
}
}
const
WrappedEditForm =
Form.
create()(
EditForm);
export
default
WrappedEditForm