zoukankan      html  css  js  c++  java
  • 【重点突破】—— React实现富文本编辑器

    前言:富文本编辑器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.css'
    
    export 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 (
                <div>
                    <Card>
                        <Button type="primary" onClick={this.handleClearContent}>清空内容</Button>
                        <Button type="primary" onClick={this.handleGetText} style={{marginLeft: 10}}>获取html文本</Button>
                    </Card>
                    <Card title="富文本编辑器">
                        <Editor 
                            editorState={editorState}
                            onEditorStateChange={this.onEditorStateChange}
                            onContentStateChange={this.onEditorChange}
                            toolbarClassName="toolbarClassName"
                            wrapperClassName="wrapperClassName"
                            editorClassName="editorClassName"
                            onEditorStateChange={this.onEditorStateChange}
                        />
                    </Card>
                    <Modal 
                        title="富文本"
                        visible={this.state.showRichText}
                        onCancel={() =>{
                            this.setState({
                                showRichText: false
                            })
                        }}
                        footer={null}>
                        {draftjs(this.state.editorContent)}
                    </Modal>
                </div>
            )
        }
    }   

    注:项目来自慕课网  

  • 相关阅读:
    Azure SQL Database (1) 用户手册
    Windows Azure Web Site (17) Azure Web Site 固定公网IP地址
    MongoDB数据文件内部结构
    压缩 MongoDB 的数据文件
    服务器如何选择网络带宽(转)
    刀片服务器和磁盘阵列卡(RAID)技术---永和维护(转)
    Solr打分出错
    Solr添加SolrDocument报错
    解决Windows Git Bash中文乱码问题
    HAProxy的独门武器:ebtree
  • 原文地址:https://www.cnblogs.com/ljq66/p/10214495.html
Copyright © 2011-2022 走看看