Intermittent issues with TinyMCE React component

What is the current behavior?

Hi, I am trying to use the tinyMCE React component inside my web app.

My web app is a listing of car engines. The user can go in and edit the description if needed using tinyMCE.

I am using a selector that targets a class name because the web app can display up to 10 possible tinyMCE instances at a time.

I’d say 50% of the time it works wonderfully, and 50% of the time something bad happens.

Here are the 50/50 odds of what could happen when loading:

• TinyMCE editor loads properly, all the buttons and controls show up, everything is good, no issues
• TinyMCE editor doesn’t load at all, no visible editor
• TinyMCE editor loads, but all the button and control icons inside the editor say, “Not Found”

This is what the source looks like when TinyMCE editor doesn’t load at all:

<div class="engineDescription">
	<textarea id="tiny-react_3380820141622576500515" style="visibility: hidden;"></textarea>
</div>

Here is the source when it does load correctly or loads but all the icons say , “Not Found”

<div class="engineDescription">
	<textarea id="tiny-react_52448036051622576555748" style="display: none;" aria-hidden="true"></textarea>
	<div role="application" class="tox tox-tinymce tox-tinymce--toolbar-sticky-off" aria-disabled="false" style="visibility: hidden; height: 500px;">
	<div class="tox-editor-container"><div data-alloy-vertical-dir="toptobottom" tabindex="-1" class="tox-editor-header">
	/* etc */
</div>

I render the component like this:

this.renderComponent(tinyMCEcomponent, { engineId: this.model.id, engineDescription: this.model.attributes.engineDescription, engine: this.model.attributes }, '.engineDescription');

And here is the tinyMCE React component:

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

import axios from 'axios';


const App = (props) => {
    const [engineDescription, setEngineTextState] = useState(props.engineDescription || "Engine Text...");
    var rteContent = '';

    if (localStorage.getItem('engineState')) {
        rteContent = localStorage.getItem('engineState');
    } else {
        rteContent = engineDescription;
    }

    const [engineState, setEngineState] = useState(rteContent);

    useEffect(() => {
        localStorage.setItem('engineState', engineState)
    }, [engineState]);


    const updateEngineText = (content) => {
        const request = axios.put(`/api/enginerManager/123/engineDescription`, JSON.stringify(content), {
            headers: {
                'Content-Type': 'application/json'
            }
        });
        setEngineState(content);
    }
    return (
        <Editor
            initialValue={rteContent}
            init={{
                selector: ".engineDescription",
                height: 500,
                menubar: 'file edit view insert format tools table help',
                plugins: [
                    'advlist autolink lists link image charmap print preview anchor',
                    'searchreplace visualblocks code fullscreen',
                    'insertdatetime media table paste code help wordcount'
                ],

            }}
            value={engineState}
            onEditorChange={updateEngineText}
        />
    )
}

    export default App;

I’m kind of at a loss of what to do. I’ve read through numerous tutorials on the web and tried different things. I tried an editor called ckeditor that worked all the time, but I like tinyMCE so much better.

So I’m wondering, what could I be doing wrong? I’ve tried so many things and ideas that I’m just out of them. I don’t know where to turn to next.

I was hoping this site might provide some answers.

Thank you

Which versions of TinyMCE, and which browser / OS are affected by this issue? Did this work in previous versions of TinyMCE or tinymce-react?

@tinymce/tinymce-react": “^3.12.6”

[tiny-james]

I am using a selector that targets a class name because the web app can display up to 10 possible tinyMCE instances at a time.

This method does not work with the tinymce-react integration. Every place your webapp should display tinymce you need to put the <Editor/> tag. The selector setting is completely ignored by the tinymce-react integration by design.

I took your code and made a demo using multiple editors: https://codesandbox.io/s/tinymcereact-multiple-editors-z03vw

Note that the way you were setting the initial value caused an infinite loop with the event callbacks so I made it into a useState call.

[tiny-james]

TinyMCE uses an iframe to display its content which allows separation of styling and selection.

When an iframe is removed from the DOM, even if it is added back immediately, it loses the contained state. This is what is causing your reordering operation to fail.

Currently the only workarounds are to force a re-init of tinymce (by using a different key) after the move or to use inline mode which can be moved provided you don’t clone the nodes.