【React】富文本编辑器 清空文本内容 获取HTML
富文本编辑器 React 传入
import React,{Component } from 'react';
import { Card, Button, Table, Form, Select,Modal, message } from 'antd';
import { Wrap } from './style';
// 富文本的 内容数据值
import { EditorState } from 'draft-js';
// 组件化标签
import { Editor } from 'react-draft-wysiwyg';
// 默认编辑器的css样式
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
// 设置 成为 html标签
import draftjs from 'draftjs-to-html';
export default class EditorDemo extends Component{
state={}
// 默认提交动作
onEditorStateChange = (editorState) => {
this.setState({
editorState,
});
}
// 修改提交动作
onEditorChange: Function = (contentState) => {
this.setState({
contentState,
});
};
// 清空文本编辑器
handleClearContent = ()=>{
this.setState({
editorState:''
})
}
// 获取 时时修改后的 内容值 转换为HTML
handleGetText = ()=>{
this.setState({
showEditorText:true
})
}
render(){
const {editorState} = this.state;
return (
<Wrap>
<Card title="操作">
<Button type="primary" onClick={this.handleClearContent}>清空内容</Button>
<Button type="primary" onClick={this.handleGetText} >获取Html内容</Button>
</Card>
<Card title="富文本编辑器">
<Editor
editorState = { editorState }
onContentStateChange = {this.onEditorChange}
onEditorStateChange = { this.onEditorStateChange }
/>
</Card>
<Modal
title='富文本'
visible={this.state.showEditorText}
onCancel={()=>{
this.setState({
showEditorText:false
})
}}
footer={null}
>
{draftjs(this.state.contentState)}
</Modal>
</Wrap>
);
}
}
------------------------------------------------------------------------------------------------------------------------------------------------------
富文本编辑器 拿到 HTML 进行转换
字符串转移为html代码 (编辑器写入一段带HTML格式的存入了数据库，数据库拿出来用这个转为HTML代码)
| dangerouslySetInnerHTML={{__HTML:this.props.String}} |
最新文章
- UIScrollView无法滚动的解决办法及UIScrollView的代理（delegate）
- iOS获取本地沙盒视频封面图片
- Tools - Oracle SQL Developer
- Object Oriented Programming python
- 小生经验贴 --- adapter的数据更新
- C#中的集合
- 慕课linux学习笔记（九）常用命令（6）
- hdu 2896 病毒侵袭 AC自动机 基础题
- 转：Emmet 学习之路 - 2 基本语法
- C++获取字符cin,getchar,get,getline的区别
- jQuery获取浏览器参数
- python截取字符串
- oracle_存储过程_没有参数_更新过期申请单以及写日志事务回滚
- pta 习题集5-18 打印学生选课清单
- PHP代码实现 1
- Linux**系统实现log日志自动清理
- Away3D引擎学习笔记（三）模型拾取（翻译）
- 【poj3621】最优比率环
- Understanding Optional and Compulsory Parameters
- django内置服务器