Error when enter down the line in TinyMCE

user_10189604 0
Viewed 368

I use TyniMCE for my react-app. I config MCE init like this:

import { Editor } from '@tinymce/tinymce-react';
.... 
 <Editor
          init={
            selector: 'textarea',
            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'
          }
          disabled={disabled}
          name={name}
          value={value}
          onChange={this.handleEditorChange}
        />

and here is my display:

enter image description here

but when I press the enter Button to enter new line. But it adds 1 line above but not below. like this

enter image description here

I want to 1 > 2 > 3 > 4 > 5. But result is 5 > 4 > 3 > 2 > 1.

Please help me, how to fix it?

Sorry for my weak English skill

reactjs javascript
1 Answers

You are using Controlled Component so you need to replace the onChange props with onEditorChange and it will resolve the issue. NOTE You will get value in onEditorChange instead of the event object. here's an example,

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

const Tinymce = ({
    value,
    onChange,
    height = 350,
    id = 'tinymce',
    menubar = false,
}) => {

const handleEditorChange = (value) => {
    onChange && onChange(value)
}

return (
    <Editor
        id={id}
        value={value}
        init={{
            height,
            menubar,
            plugins: [
                'advtable advlist autolink lists link image charmap print preview anchor',
                'searchreplace visualblocks code fullscreen visualchars',
                'insertdatetime media table paste code help wordcount directionality emoticons'
            ],
            toolbar:
                'undo redo | formatselect | bold italic backcolor link | \
         alignleft aligncenter alignright alignjustify | \
         bullist numlist | outdent indent| table media code anchor emoticons directionality visualchars | preview | removeformat | help'
        }}
        onEditorChange={handleEditorChange}
        />
    );
}

export default Tinymce;
user_75545080
Related