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. dinic算法求最大流的学习

    http://trp.jlu.edu.cn/software/net/lssx/4/4.38.htm http://www.cnblogs.com/zen_chou/archive/0001/01/0 ...

  2. PatentTips - Substitute virtualized-memory page tables

    BACKGROUND Many computer systems utilize virtualized memory for security, stability and/or other pur ...

  3. Spring MVC-集成(Integration)-生成JSON示例(转载实践)

    以下内容翻译自:https://www.tutorialspoint.com/springmvc/springmvc_json.htm 说明:示例基于Spring MVC 4.1.6. 以下示例显示如 ...

  4. input子系统驱动学习之中的一个

        刚開始学习linux这门课就被分配编写一个设备的input子系统驱动.这对我的确有点困难.只是实际的操作中发现困难远比我想象的要大的多.本以为依照老师课上的步骤就行非常快的完毕这项任务.后来发 ...

  5. hdu3592 World Exhibition --- 差分约束

    这题建图没什么特别 x个条件:Sb-Sa<=c y个条件:Sa-Sb<=-c 题目问的是.1和n之间的关系. 有负环的话,整个就不可能成立,输出-1 假设图是连通的(1到n是连通的),就输 ...

  6. .m文件导入C++头文件带来的错误

    这几天的工作挖了不少的坑.遇到了各种千奇百怪的错误,如今好好总结一下. 新建一个project,然后新建HelloCPP.h,HelloCPP.cpp文件.HelloCPP.h文件内容例如以下: #i ...

  7. hdu(1114)——Piggy-Bank(全然背包)

    唔..近期在练基础dp 这道题挺简单的(haha).可是我仅仅想说这里得注意一个细节. 首先题意: 有T组例子,然后给出储蓄罐的起始重量E,结束重量F(也就是当它里面存满了零钱的时候).然后给你一个数 ...

  8. 【译文】利用STAN做贝叶斯回归分析:Part 2 非正态回归

    [译文]利用STAN做贝叶斯回归分析:Part 2 非正态回归 作者 Lionel Hertzogn 前一篇文章已经介绍了怎样在R中调用STAN对正态数据进行贝叶斯回归.本文则将利用三个样例来演示怎样 ...

  9. Python中的math和保留小数位数方法

    转载自 http://xukaizijian.blog.163.com/blog/static/17043311920111163272414/ math模块实现了许多对浮点数的数学运算函数.  这些 ...

  10. Docker For MYSQL 8.0 特别注意修复数据库新的验证方式

    从Docker登录MySQL的终端 docker exec -it wordpress-mysql /bin/bash 登录数据库 mysql -u root -p 使用MYSQL数据库 use my ...