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 => {
) {
].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) {
,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: {
},
},
},
wrapperCol: {
},
},
},
};
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个字',
}],
})(
, }} />
)}
</FormItem>
<FormItem
label="封面图片:"
{...formItemLayout}
>
{getFieldDecorator('image', {
rules: [{
required: true, message: '请上传封面图片',
}],
})(
<div>
<Uploading />
</div>
)}
</FormItem>
<FormItem
label="文章标签:"
{...formItemLayout}
>
{getFieldDecorator('biaoqian')(
<RadioGroup name="radiogroup" >
, } }}>new</label>
, }} /><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'>
, }} 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富文本的更多相关文章

  1. wysiwyg 富文本编辑器(附带图片上传功能)

    Fist: 需要的文件 font 文件夹下面的也是需要的哟 Then: 引入文件 <link href="bootstrap/css/bootstrap.css" rel=& ...

  2. React+wangeditor+node富文本处理带图片上传

    最近有个需求出现在我的视野中,因为我的另外的博客需要上传文章,但是我不想每次都在我的数据库中慢慢的修改格式,所以我另做了一个后台去编辑文本后发送给服务器,那么这里就涉及到两点,一个是富文本,一个是需要 ...

  3. react 使用draft.js富文本编辑器

    参照网址:https://www.cnblogs.com/3body/p/6224010.html 参看网址:https://www.cnblogs.com/mosquito18/p/9787816. ...

  4. draft.js开发富文本编辑器

    写在前头的话 在react中去寻找一个好用的富文本编辑器网上很少有推荐的,搜到的也只有一些个人不成熟的作品,慢慢发现网上比较推荐的一个东东叫做draft.js. 这个东西在网上可以找到的教程也是手指头 ...

  5. React Native之TextInput的介绍与使用(富文本封装与使用实例,常用输入框封装与使用实例)

    React Native之TextInput的介绍与使用(富文本封装与使用实例,常用输入框封装与使用实例) TextInput组件介绍 TextInput是一个允许用户在应用中通过键盘输入文本的基本组 ...

  6. 【重点突破】—— React实现富文本编辑器

    前言:富文本编辑器Rich Text Editor, 简称 RTE, 是一种可内嵌于浏览器,所见即所得的文本编辑器.   一.安装插件 react-draft-wysiwyg: 文本编辑器插件 dra ...

  7. 富文本编辑器TinyMCE的使用(React Vue)

    富文本编辑器TinyMCE的使用(React Vue) 一,需求与介绍 1.1,需求 编辑新闻等富有个性化的文本 1.2,介绍 TinyMCE是一款易用.且功能强大的所见即所得的富文本编辑器. Tin ...

  8. react富文本编辑器

    首先安装两个插件 yarn add react-draft-wysiwyg draftjs-to-html --save 使用的代码如下 import React from 'react' impor ...

  9. 去除富文本中的html标签及vue、react、微信小程序中的过滤器

    在获取富文本后,又只要显示部分内容,需要去除富文本标签,然后再截取其中一部分内容:然后就是过滤器,在微信小程序中使用还是挺多次的,在vue及react中也遇到过 1.富文本去除html标签 去除htm ...

  10. 【React】富文本编辑器 清空文本内容 获取HTML

    富文本编辑器  React  传入 import React,{Component } from 'react'; import { Card, Button, Table, Form, Select ...

随机推荐

  1. AngularJS:添加检查密码输入是否一致的功能

    感谢作者(http://blog.brunoscopelliti.com/angularjs-directive-to-check-that-passwords-match) 利用AngularJS的 ...

  2. [React Testing] Confidently Ship Production React Apps

    We want to make sure that when we ship new code, our users can use the application. The best way we' ...

  3. 关于MySQL错误 2005 - Unknown MySQL server host 'localhost' (0) 原因及解决方法

    今天在外面开navicat for mysql的时候,怎么也连不上自己本机上的数据库,一直显示2005 - Unknown MySQL server host 'localhost' (0): 错误代 ...

  4. HDU 3656 二分+dlx判定

    Fire station Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) To ...

  5. Mybatis 碰到的一些问题

    1. SQL语句参数无法获取:nested exception is org.apache.ibatis.reflection.ReflectionException: There is no get ...

  6. golomb哥伦布编码——本质上就是通过0来区分商和余数

    哥伦布编码是一个针对整数的变长编码方式,详细介绍可以看维基百科.这里简单介绍下: 哥伦布编码使用指定的整数 M 把输入的整数分成两部分:商数 q.余数 r. 商数当做一元编码,而余数放在后面做为可缩短 ...

  7. Microsoft ASP.NET SignalR

    SignalR类似与JavaScript实时框架,如Socket.IO.SignalR能够完成客户端向服务器的异步通信,并同时支持服务器向浏览器客户端推送事件.SignalR的连接通过日益流行的Web ...

  8. hdoj--5625--Clarke and chemistry(枚举)

    Clarke and chemistry Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Oth ...

  9. How to build CppCMS 1.x.x

    How to build CppCMS 1.x.x Requirements Mandatory Requirements Recommended Dependencies Suggested Dep ...

  10. tp 推送微信的模板消息

    设置推送类: <?php /** * tpshop 微信支付插件 * ============================================================== ...