Cannot set property 'onload' of null

[scrambled2k3]

When trying to utilize the 'setup' function I get the error:

Uncaught TypeError: Cannot set property 'onload' of null

I am using react-tinymce: 0.5.1

If I use a tinymce version <= 4.3.12 then it works fine...but I get the following warning:

'KeyboardEvent.keyIdentifier' is deprecated and will be removed in M54, around October 2016. See https://www.chromestatus.com/features/5316065118650368 for more details.

However, if I use anything > 4.3.12 I get the above mentioned error and tiny mce fails to load.

For reference, here is my code:

<TinyMCE
    content={value}
    config={{
        menubar: false,
        statusbar: false,
        plugins: 'pplan link image code',
        toolbar: 'bold italic | alignleft aligncenter alignright | code save',
        setup: function(editor) {
            editor.on('blur', function(e) {
                console.log('blurred');
            });
        },
    }}
/>

Is this an issue with react-tinymce or tinymce itself. I haven't seen this issue referenced anywhere else.

[SimonChris]

Did you ever find a solution to this? I am getting the same error when trying to use the file_browser_callback function. Like you say, switching to an older version of TinyMCE solves the issue, so it seems that react-tinymce is not entirely compatible with the newest versions.

Debugging through the TinyMCE.js component reveals that the error occurs in the "_remove" function, when calling "tinymce.EditorManager.execCommand('mceRemoveEditor', true, this.id);".

[SimonChris]

See my comments on issues #62 and #43. Declaring functions inside the config object causes the component to rerender constantly, which somehow triggers this problem. Declaring the function outside the object fixes the isssue, as the same function object is now reused every time.

function setupFunction(editor) {
    editor.on('blur', function(e) {
        console.log('blurred');
    });
}
class TinyMCEEditor extends React.Component {
render() {
return <TinyMCE
    content={value}
    config={{
        menubar: false,
        statusbar: false,
        plugins: 'pplan link image code',
        toolbar: 'bold italic | alignleft aligncenter alignright | code save',
        setup: setupFunction
    }}
/> 
}
}

[scrambled2k3]

Since what I was trying to do had a prop to handle it, I ended up using the 'onBlur' prop and it worked if I passed it the function reference.

<TinyMCE
    content={value}
    config={{
        menubar: false,
        statusbar: false,
        plugins: 'link image code textcolor colorpicker pplan',
        toolbar: 'fontsizeselect forecolor backcolor | bold italic | code fullscreen',
        fontsize_formats: '8px 10px 12px 14px 18px 24px 36px',
        height: 250
   }}
   onBlur={this.handleChange.bind(this)}
/>

[maxyharr]

I don't think this is specific to react-tinymce. I'm getting this error using "@tinymce/tinymce-angular": "~2.0.0".