CODEWITHSUNDEEP
javascriptreactjstinymce
silencedogood
silencedogood

Reputation: 3299

TinyMCE with ReactJs - onChange event only firing once

I'm using tinyMCE with my reactjs app. The onChange event will fire once, properly reflecting the input data in an alert. Then I get nothing.

Here's the relevant code: 

<Editor init={{
    statusbar: false,
    menubar: false,
    }}
    onChange={this.SetText}
 />

onChange method:

SetText(e) {
    alert(e.target.getContent());
}

Upvotes: 2

Views: 7329

Answers (2)

imran haider
imran haider

Reputation: 343

Actually the event you using is not right. For reactJs plugIn they have onEditorChange. You can use it as following

<Editor
  apiKey="MyAPIKey"
  initialValue=""
  init={{
    height: 500,
    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.onChange}
/>

and then you can access editor's content by using

  onChange = (content) => {
    console.log(content);
  }

e.target is not required

Upvotes: 7

Uladzislau Ulasenka
Uladzislau Ulasenka

Reputation: 582

Maybe one of this events pass better then onChange?

  • KeyDown - Fires when a key is pressed within the editor.
  • KeyPress - Fires when a key is pressed within the editor.
  • KeyUp - Fires when a key is released within the editor.

https://www.tiny.cloud/docs/advanced/events/

Upvotes: 0

Related Questions