React TinyMCE — данные не обязательны

Я создал компонент textarea React с возможностью использования Tiny MCE, который я реализую с использованием компонента react-tinymce.

import React, { Component } from "react";
import TinyMCE from "react-tinymce";

class Textarea extends Component {
  constructor(props) {
    super(props);

    this.state = {
      data: {
        body: ""
      }
    };
  }

  // ..a few methods not relevant to this question..

  handleFieldChange(e) {
    const data = { ...this.state.data };
    data[e.target.name] = e.target.value;
    this.setState({ data });
  }

  render() {
    return (
      <div>
        {this.props.showLabel ? (
          <label htmlFor={this.props.id}>{this.props.label}</label>
        ) : null}

        {!this.props.mce ? (
          <textarea
            className={`form-control ${this.state.error ? "error" : ""}`}
            id={this.props.id}
            type={this.props.type}
            name={this.props.name}
            value={this.props.value}
            placeholder={this.props.placeholder}
            onChange={this.handleFieldChange}
          />
        ) : (
          <TinyMCE
            name={this.props.name}
            content={this.props.value}
            config={{
              plugins: "autolink link image lists print preview code",
              toolbar:
                "undo redo | bold italic | alignleft aligncenter alignright | code",
              height: 300,
              branding: false,
              statusbar: false,
              menubar: false
            }}
            onChange={this.handleFieldChange}
          />
        )}
      </div>
    );
  }
}

export default Textarea;

Я бы в основном использовал такой компонент:

<Textarea 
  name="body" 
  label="Body"
  showLabel={true}
  placeholder="body"
  value={data.body} 
  mce={true}
/>

Таким образом, если для свойства mce установлено значение true, вы получаете компонент TinyMCE.

Но в то время как обычная версия textarea связывает все, что вы вводите, с state.data.body, версия TinyMCE этого не делает.

// after typing into TinyMCE and submitting
console.log(this.state.data.body); // empty string

Обратите внимание, что этот компонент Textarea используется как часть компонента формы с методом onSubmit.


reactjs javascript react-component react-state-management tinymce
person yevg    schedule 05.07.2018    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Отредактировано на основе комментария:

Итак, вот действительно простой пример привязки данных Tiny в React. Он использует «официальный» компонент TinyMCE. Он выглядит очень похоже на ваш, за исключением использования события onEditorChange, чтобы рассматривать редактор как контролируемый компонент.

Теперь, когда вы печатаете, вы увидите изменение состояния в консоли, ваши данные привязаны, и вы можете вывести их из состояния, однако это лучше всего подходит для вашего приложения. Ваш тернер не должен влиять на это.

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

class App extends Component {
    constructor(props) {
    super(props);
    this.state = {
      text: ''
    };
}

  handleEditorChange = (content) => {
    this.setState({ text: content });;
  }


  render() {
    console.log(this.state.text);
    return (
      <div className="App">
       <Editor
        apiKey = 'KEY'
        value={this.state.text}
        onEditorChange={this.handleEditorChange}
        init={{
            theme: 'modern',
            width: '75%',
            height: '250px',
            plugins: 'table colorpicker spellchecker powerpaste hr link media image textcolor print noneditable  lists',
            toolbar:  'styleselect | bold italic underline forecolor | alignleft aligncenter alignright | bullist numlist | outdent indent | globalImagesButton link ',
            powerpaste_allow_local_images: true,
            image_advtab: true,
        }}
      />

      </div>
    );
  }
}
person TheRobQ    schedule 13.07.2018
comment
да, я использую связанный пакет и вижу содержимое, введенное в редактор, я не уверен, как это содержимое может быть сохранено в переменной, поскольку для обычного текстового поля я обрабатывал это вручную с помощью события onChange. Но похоже, что в компоненте TinyMCE такой опоры нет. - person yevg; 13.07.2018