react富文本编辑器
首先安装两个插件
yarn add react-draft-wysiwyg draftjs-to-html --save
使用的代码如下
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,
editorContent: '',
editorState: '',
}; handleClearContent = ()=>{
this.setState({
editorState:''
})
} handleGetText = ()=>{
this.setState({
showRichText:true
})
} onEditorChange = (editorContent) => {
this.setState({
editorContent,
});
}; onEditorStateChange = (editorState) => {
this.setState({
editorState
});
}; render(){
const { editorContent, editorState } = 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="富文本编辑器">
<Editor
editorState={editorState}
onContentStateChange={this.onEditorChange}
onEditorStateChange={this.onEditorStateChange}
/>
</Card>
<Modal
title="富文本"
visible={this.state.showRichText}
onCancel={()=>{
this.setState({
showRichText:false
})
}}
footer={null}
>
{draftjs(this.state.editorContent)}
</Modal>
</div>
);
}
}
效果
react富文本编辑器的更多相关文章
- 基于 React-draft-wysiwyg 实现的 react 富文本编辑器组件 开箱即用
工作中遇到了一个需要做图文详情 的富文本编辑的需求, 于是基于 React-draft-wysiwyg 实现了一个 纯组件, 目前支持 常规文本输入 外部链接图片 以及本地上传图片, 由于是纯组件, ...
- 【重点突破】—— React实现富文本编辑器
前言:富文本编辑器Rich Text Editor, 简称 RTE, 是一种可内嵌于浏览器,所见即所得的文本编辑器. 一.安装插件 react-draft-wysiwyg: 文本编辑器插件 dra ...
- 富文本编辑器TinyMCE的使用(React Vue)
富文本编辑器TinyMCE的使用(React Vue) 一,需求与介绍 1.1,需求 编辑新闻等富有个性化的文本 1.2,介绍 TinyMCE是一款易用.且功能强大的所见即所得的富文本编辑器. Tin ...
- 【React】富文本编辑器 清空文本内容 获取HTML
富文本编辑器 React 传入 import React,{Component } from 'react'; import { Card, Button, Table, Form, Select ...
- react-quill 富文本编辑器
适合react的一款轻量级富文本编辑器 1.http://blog.csdn.net/xiaoxiao23333/article/details/62055128 (推荐一款Markdown富文本编辑 ...
- 富文本编辑器--引入demo和简单使用
wangEditor —— 轻量级 web 富文本编辑器,配置方便,使用简单.支持 IE10+ 浏览器. 官网:www.wangEditor.com 文档:www.kancloud.cn/wangfu ...
- React中富文本编辑器的技术选型调研
前言 富文本编辑器是项目中不可或缺的部分,目前市面上可以选择的富文本编辑器种类繁多,如何在项目中选择一款集轻量,美观,稳定,坑少,满足需求的富文本编辑器变成了团队中一个重要的问题. 现在项目中使用的是 ...
- draft.js开发富文本编辑器
写在前头的话 在react中去寻找一个好用的富文本编辑器网上很少有推荐的,搜到的也只有一些个人不成熟的作品,慢慢发现网上比较推荐的一个东东叫做draft.js. 这个东西在网上可以找到的教程也是手指头 ...
- 浅析富文本编辑器框架Slate.js
浅析富文本编辑器框架Slate.js 本文不是关于Slate.js使用入门的文章,如果还不了解该框架,建议先阅读下官方的文档:Slate官网文档 关于Slate的一些特性 不同于其他编辑器类的库,Sl ...
随机推荐
- 怎样理解 DOM 的三种层级关系
除了根节点,其他节点都有三种层级关系. 父节点关系(parentNode):直接的那个上级节点 子节点关系(childNodes):直接的下级节点 同级节点关系(sibling):拥有同一个父节点的节 ...
- eclipse 创建Java web项目 Cannot change version of project facet Dynamic web module to xxx
问题描述: 用Eclipse创建Java web项目时选择的Artifact Id为maven-artchetype-webapp,由于这个archetype比较老,用的servlet还是2.3的. ...
- layer插件loading快速应用示例
1.页面引用<link rel="stylesheet" href="../Js/layer/skin/layer.css" /><scri ...
- java(堆、栈、常量池)
参考链接: https://www.cnblogs.com/wanson/articles/10819189.html
- windows控制台,cmd,命令提示符下的基础操作
打开dos命令窗口1.win+r-->运行-->cmd 2.摁住shift+鼠标右击 选择 在此处打开命令窗口3.在磁盘某文件夹下,选择标题栏中输入框,输入cmd 回车 windows下常 ...
- pxc 5.6 忘记 root 密码
pxc 5.6 忘记密码处理 只说思路: mysql.user 是 myisam 引擎的,pxc 只支持 innodb 引擎.其他存储引擎的更改不复制.然而,DDL(Data Definition L ...
- webapi 可空参数
这里上面是一个可空参数的例子.请不要写成 public WapOutgoingResponse<List<PatrolTaskOut>> GetTaskPatrolHistor ...
- linux下安装压缩解压程序7z命令及7z命令的使用
1.1 在线安装如果你的宿主机Linux可以连接外网,推荐用这种方式,方便简单,执行命令:sudo apt-get install p7zip即可在线安装7z命令. 1.2 安装包安装7z(准确点说是 ...
- Ubuntu18.04系统执行语句时出现错误Failed to load module "canberra-gtk-module"
Ubuntu18.04系统执行gnuradio-companion时,命令行提示错误Failed to load module "canberra-gtk-module",虽然看起 ...
- OI视角浅谈布隆过滤器
简要谈及布隆过滤器 Preface 不负责的出题人扔了一道5e5,2M卡内存的题,标算布隆过滤器,然而std自己用std::set 70M碾过去了. 没学OI时候草草看过这个,不过忘得差不多了. 今天 ...