富文本编辑器的实现

Bertha 。 2022-04-17 00:20 314阅读 0赞

react-draft-wysiwyg是文本编辑器的插件

draftjs-to-html是把文本变成HTML的插件

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUzNDc4_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUzNDc4_size_16_color_FFFFFF_t_70 1][]

引入的东西到npm去看

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUzNDc4_size_16_color_FFFFFF_t_70 2][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUzNDc4_size_16_color_FFFFFF_t_70 3][]

这时编辑器已经显示出来了。

下面实现清空内容和获取html文本

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUzNDc4_size_16_color_FFFFFF_t_70 4][]

实现清空内容  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUzNDc4_size_16_color_FFFFFF_t_70 5][]

获取html文本

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUzNDc4_size_16_color_FFFFFF_t_70 6][]

引入modal

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUzNDc4_size_16_color_FFFFFF_t_70 7][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUzNDc4_size_16_color_FFFFFF_t_70 8][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUzNDc4_size_16_color_FFFFFF_t_70 9][]

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>
            );
        }
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUzNDc4_size_16_color_FFFFFF_t_70]: /images/20220417/b77dc96973ad4c61a52ed99b60c0dbe5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUzNDc4_size_16_color_FFFFFF_t_70 1]: /images/20220417/f53f7c1bad8d4f669dca65ddf245bd85.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUzNDc4_size_16_color_FFFFFF_t_70 2]: /images/20220417/33c78027a70c4fe6afad884c29d0e41d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUzNDc4_size_16_color_FFFFFF_t_70 3]: /images/20220417/5b6d084bd9464d49832f24e107f95f21.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUzNDc4_size_16_color_FFFFFF_t_70 4]: /images/20220417/8639fa4b7081487a8b7576f7aaedc4cd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUzNDc4_size_16_color_FFFFFF_t_70 5]: /images/20220417/397d75fd61214a85b67b13f78a37bf04.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUzNDc4_size_16_color_FFFFFF_t_70 6]: /images/20220417/8eed8121b05249d5a20ce14d37cc6c1e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUzNDc4_size_16_color_FFFFFF_t_70 7]: /images/20220417/62420c5ff21d407083cc9bfbc2b2ac96.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUzNDc4_size_16_color_FFFFFF_t_70 8]: /images/20220417/1f8cbd27f5da49ecaeac851b49045f90.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUzNDc4_size_16_color_FFFFFF_t_70 9]: /images/20220417/c092c3b8d4b744ee898f9d6b0a7c1e58.png