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

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">

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 (
            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 |

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:


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

Has anyone ever run into an issue like this?



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


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