I am trying to use TinyMCE with dynamically generated textareas, but the IDs are always set by something else

Question

I am using Underscore, React, and TinyMCE for one of my games.

Part of the game management has a editing screen with multiple TinyMCE textboxes, so I need that dynamically-generated id.

That's why in the template, I use textareas with dynamically generated IDs like this:

<textarea id="{{'game_' + g.id}}" class="gameDesc">
</textarea>

which should result in a textarea like this:

<textarea id="game_7" class="gameDesc"></textarea>

And then I use it to set the value of my selector in my TinyMCE component like this:

return (
    <Editor
        initialValue={gameDesc}
        init={{
            selector: 'textarea#game_' + gameId,
            height: 500,
            plugins: [
                'advlist autolink lists link image charmap print preview anchor'
            ],
            toolbar: 'undo redo | bold italic underline strikethrough | fontselect fontsizeselect formatselect |
        }}
        value={contentEditor}
        onEditorChange={handleEditorChange}
    />
)

But whenever I run it, I see that somehow the ID of my textarea is being changed like this:

<textarea id="tiny-react_75536734221618409165824" />

I have no idea where or how that's being set.

Just to make sure, I added a test line like this:

<div id="{{'game_' + g.id}}">TESTING</div>

And it does render correctly like this:

<div="game_7">TESTING</div>

So I'm not sure what's going on.

Has anyone ever run into an issue like this?

Thanks!

Answer 1

Assuming you are using the TinyMCE React component there is a parameter that you can pass to the <Editor> tag to set the id:

https://www.tiny.cloud/docs/integrations/react/#id

An id for the editor. Used for retrieving the editor instance using the tinymce.get('ID') method. Defaults to an automatically generated UUID.