react富文本编辑器

首先安装两个插件

使用的代码如下

import React from 'react'
import {Button,Card,Modal} from 'antd'
import {Editor} from 'react-draft-wysiwyg'
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css'
import draftjs from 'draftjs-to-html'export default class RichText extends React.Component{state = {showRichText:false,editortContent: "",editorState: "",
};handleClearContent = ()=>{this.setState({editorState:''})
}handleGetText = ()=>{this.setState({showRichText:true})
}onEditorChange = (editortContent) => {this.setState({editortContent,});
};onEditorStateChange = (editorState) => {this.setState({editorState});
};render(){console.log(this.state)let { editorState,editortContent } = this.state;return (<div><Card style={{marginTop:10}}><Button type="primary" onClick={this.handleClearContent}>清空内容</Button><Button type="primary" onClick={this.handleGetText}>获取HTML文本</Button></Card><Card title="富文本编辑器"><EditoreditorState={editorState}onContentStateChange={this.onEditorChange}onEditorStateChange={this.onEditorStateChange}/></Card><Modaltitle="富文本"visible={this.state.showRichText}onCancel={()=>{this.setState({showRichText:false})}}footer={null}>{draftjs(this.state.editortContent)}</Modal></div>);
}

}

react富文本编辑器相关推荐

react 富文本编辑器react-quill
闲暇之余不忘学习,提升自己 ,知识在于积累,更是一笔财富. 看完文章,感谢各位支持一下呗! 实现步骤安装富文本编辑器:yarn add react-quill 导入富文本编辑器组件以及样式文件渲染 ...
2021 年 React 的 5 大富文本编辑器
5大富文本编辑器今天,富文本编辑器被用于许多应用中,包括简单的博客和复杂的内容管理系统.然而,选择一个并不容易,因为有很多具有不同功能的编辑器. 因此,在这篇文章中,我将评估5个React的富文本编 ...
【重点突破】—— React实现富文本编辑器
前言:富文本编辑器Rich Text Editor, 简称 RTE, 是一种可内嵌于浏览器,所见即所得的文本编辑器. 一.安装插件 react-draft-wysiwyg: 文本编辑器插件 dra ...
React H5 使用div自定义简单富文本编辑器
最近项目中h5端要实现图文上传,而且还要支持用户用户输入的格式,例如换行啥的,那么使用输入控件保存输入内容,图片上传控件就不合适了,因为很难知道用户的输入样式. 如果使用一些现有的富文本编辑器,貌似又 ...
React 版本的真开箱即用的富文本编辑器wysiwyg
React 版本的真开箱即用的富文本编辑器这篇文章推荐的react 版的富文本编辑器名字叫做wysiwyg,第一时间你可能觉得这个名字起的很烂,很难记,但是当你知道它的全称后就很好记了,全称为 Wh ...
记录React之富文本编辑器
主要知识点:contentEditable 以及 document.execCommand 日常使用的输入框,大多直接使用input,支持正常的文本操作,但是想要做复杂的内容输入,就需要一个富文本编辑 ...
react中使用simditor富文本编辑器
react 中使用没有启用图片上传功能的simditor 富文本编辑器环境介绍功能需求步骤实现 npm安装simditor依赖 jsx页面引入 componentDidMount 获取DOM ...
react html编辑器,wangEditor富文本编辑器+react+antd的使用
搜索热词 1.github上发现富文本编辑器: 2.结合react+antd的具体使用: 案例使用场景:MyModal为弹窗,弹窗显示编辑名称及描述.描述使用wangeditor富文本编辑器实现. ...
《React后台管理系统实战：五》产品管理（二）：产品添加页面及验证等、富文本编辑器、提交商品
一.产品添加基础部分 1 home.jsx点添加按钮动作跳转到添加商品页点击:onClick={() => this.props.history.push('/product/add-upda ...
React +antd +wangEditor 富文本编辑器
1. 安装 npm i wangeditor --save 2. 引入: import E from 'wangeditor'; 3. 渲染: <div id="div1"& ...

react富文本编辑器

react富文本编辑器相关推荐

最新文章

热门文章