Как получить значение из редактора tinymc в реагировать JS? - PullRequest
0 голосов
/ 15 октября 2018

Я пытаюсь отобразить данные из редактора tinyms, который показывался неопределенным в консоли, с помощью реагирования js .Я хочу записать некоторый контент в редактор tinyms, используя реаги js .Пожалуйста, помогите мне с этой проблемой ..

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

class AddEvent extends Component {

    constructor() {
        super();
        this.state = {
            content: '',

        };
          this.handleChange=this.handleChange.bind(this);
          this.handleEditorChange=this.handleEditorChange.bind(this.content);

    }
 render() {
        return (
       <form>
            <Editor
       initialValue="<p>This is the initial content of the editor</p>"
        init={{ plugins: 'link image code',
      toolbar: 'undo redo | bold italic| alignleft aligncenter alignright | code'
                                    }}
         onChange={this.handleEditorChange}
                                />

      <div className="col-md-3">
  <button className="btn btn-block btn-primary btn-lg" type="submit">Save Event</button>
                            </div>
</form>

1 Ответ

0 голосов
/ 15 октября 2018

Функция привязки похожа на .bind(this), но вы связываете handleEditorChange с неверным значением

Измените

 this.handleEditorChange = this.handleEditorChange.bind(this.content);

на

 this.handleEditorChange = this.handleEditorChange.bind(this);

Пожалуйста, найдите нижеисправлен код с дополнительными изменениями.Это будет работать как ожидалось

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

class AddEvent extends Component {

    constructor() {
        super();
        this.state = {
            content: '',

        };
          this.handleChange=this.handleChange.bind(this);
          this.handleEditorChange=this.handleEditorChange.bind(this);
    }

    handleEditorChange(e){
        console.log('Content was updated:', e.target.getContent());
        this.setState({content: e.target.getContent()});
      }
 render() {
        const content = <p>This is the initial content of the editor</p>;
        return (
       <div>
         <form>
            <Editor
        initialValue={content}
        init={{ plugins: 'link image code',
        toolbar: 'undo redo | bold italic| alignleft aligncenter alignright | code'}}
         onChange={this.handleEditorChange}/>

      <div className="col-md-3">
  <button className="btn btn-block btn-primary btn-lg" type="submit">Save Event</button>
       </div>
    </form>
 </div>
)}
}
...