Как реализовать обработчик множественного ввода с помощью редактора tinyMce HTML с reactjs? Я пробовал это, но это вызывает ошибку, поскольку это неконтролируемое - PullRequest
0 голосов
/ 07 мая 2020

Как реализовать обработчик множественного ввода с помощью редактора TinyMCE HTML с reactjs? Я просто хотел знать, есть ли способ обрабатывать несколько входов с библиотекой TinyMCE в реакции js, чтобы я мог отправлять данные без каких-либо ошибок. Ниже приведен весь код, который я пробовал, но он выдает мне ошибку как неконтролируемый ввод.

import React, { Component } from 'react';
import { Editor } from '@tinymce/tinymce-react';

export default class HtmlEditor extends Component {
constructor(props) {
    super(props);

    this.state = {
        post: {
            title: '',
            body: ''
        }
    };
}

handleSubmit = e => {
    e.preventDefault();
    const data = { ...this.state.post }
    console.log(data);
}

handleEditorChange = (content, editor) => {
    this.setState({
        post: {
            body: content
        }
    });
    console.log(content)
}

handleChange = e => {
    let data = this.state.post.title
    data = e.currentTarget.value;
    this.setState({
        post: {
            title: data
        }
    })
}

render() {
    return (
        <div className="container">
            <form onSubmit={this.handleSubmit}>
                <div className="form-group">
                    <label htmlFor="title">Post Title</label>
                    <input
                        value={this.state.post.title}
                        onChange={this.handleChange}
                        type="text"                            
                        className="form-control"
                    />
                </div>
                <Editor
                    apiKey='9ztainkpdpehxdxkpztgt25fo6vlonfmjg1l4jduqdnfrfhv'
                    initialValue={this.state.post.body}
                    init={{
                        height: 300,
                        menubar: false,
                        plugins: [
                            'advlist autolink lists link image charmap print preview anchor',
                            'searchreplace visualblocks code fullscreen',
                            'insertdatetime media table paste code help wordcount'
                        ],
                        toolbar:
                            'undo redo | formatselect | bold italic backcolor | \
                                    alignleft aligncenter alignright alignjustify | \
                                    bullist numlist outdent indent | removeformat | help'
                    }}
                    onEditorChange={this.handleEditorChange}
                    className="form-control"
                />
                <div className="d-flex justify-content-end mt-3">
                    <button className="btn btn-primary">Create Post</button>
                </div>
            </form>
        </div>
    )
}
}
...