zoukankan      html  css  js  c++  java
  • 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>
            );
        }
    }

    效果

  • 相关阅读:
    Python文件相关的操作
    Python运算符
    字符串方法
    Python列表的增删改查和元祖
    压测
    jmeter相关使用
    charles的使用
    接口测试
    编程珠玑之关键字(1)--《c语言深度剖析》整理(转)
    循环单链表操作(转)
  • 原文地址:https://www.cnblogs.com/mosquito18/p/9787816.html
Copyright © 2011-2022 走看看