Question

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

Answer 1

实际上，您使用的事件不正确。对于reactJs插件，它们具有onEditorChange。您可以按以下方式使用它

<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}
/>

然后您可以通过使用

来访问编辑器的内容

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

e.target不是必需的

Answer 2

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/

TinyMCE with ReactJs - onChange event only firing once

2 个答案: