网站群系统建设思路,加速网站的加速器,石家庄网站建设全包,网站管理一般要做什么前言#xff1a;富文本编辑器Rich Text Editor, 简称 RTE, 是一种可内嵌于浏览器#xff0c;所见即所得的文本编辑器。 一、安装插件 react-draft-wysiwyg#xff1a; 文本编辑器插件 draftjs-to-html#xff1a;文本转换为html的插件 yarn add react-draft-wysiwyg draftj… 前言富文本编辑器Rich Text Editor, 简称 RTE, 是一种可内嵌于浏览器所见即所得的文本编辑器。 一、安装插件 react-draft-wysiwyg 文本编辑器插件 draftjs-to-html文本转换为html的插件 yarn add react-draft-wysiwyg draftjs-to-html --save二、富文本编辑器实现 pages-rich-index.js 对应路由/admin/rich import React from react
import {Card, Button, Modal} from antd
import {Editor} from react-draft-wysiwyg
import draftjs from draftjs-to-html
import react-draft-wysiwyg/dist/react-draft-wysiwyg.cssexport default class RichText extends React.Component{state {showRichText: false,editorContent: ,editorState: }handleClearContent () { //清空文本this.setState({editorState: })}handleGetText () { //获取文本内容this.setState({showRichText: true})}onEditorStateChange (editorState) { //编辑器的状态this.setState({editorState})}onEditorChange (editorContent) { //编辑器内容的状态this.setState({editorContent})}render(){const { editorState, editorContent } this.state;return (divCardButton typeprimary onClick{this.handleClearContent}清空内容/ButtonButton typeprimary onClick{this.handleGetText} style{{marginLeft: 10}}获取html文本/Button/CardCard title富文本编辑器Editor editorState{editorState}onEditorStateChange{this.onEditorStateChange}onContentStateChange{this.onEditorChange}toolbarClassNametoolbarClassNamewrapperClassNamewrapperClassNameeditorClassNameeditorClassNameonEditorStateChange{this.onEditorStateChange}//CardModal title富文本visible{this.state.showRichText}onCancel{() {this.setState({showRichText: false})}}footer{null}{draftjs(this.state.editorContent)}/Modal/div)}
} 注项目来自慕课网 转载于:https://www.cnblogs.com/ljq66/p/10214495.html
