Question

我创建了一个textarea React组件，并带有使用Tiny MCE的选项，Im使用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方法一起用作表单组件的一部分。

Answer 1

根据评论进行了编辑：

因此，这是一个在React中绑定Tiny的非常基本的示例。它使用“官方” TinyMCE组件。它看起来与您的非常相似，只是使用onEditorChange event来将编辑器视为受控组件。

现在，当您键入内容时，您将在控制台中看到状态更改，并且您的数据已绑定，您可以使其脱离状态，但是最适合您的应用程序。您的三元不应该影响这一点。

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

React TinyMCE-数据未绑定

1 个答案: