我正在尝试将 TinyMCE 与动态生成的文本区域一起使用，但 ID 始终由其他内容设置

如何解决我正在尝试将 TinyMCE 与动态生成的文本区域一起使用，但 ID 始终由其他内容设置

我在我的一款游戏中使用 Underscore、React 和 TinyMCE。

游戏管理的一部分有一个带有多个 TinyMCE 文本框的编辑屏幕，所以我需要那个动态生成的 id。

这就是为什么在模板中，我使用带有动态生成 ID 的文本区域，如下所示：

Inputs

这应该导致像这样的文本区域：

Outputs

然后我使用它在我的 TinyMCE 组件中设置选择器的值，如下所示：

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

但是每当我运行它时，我都会看到我的 textarea 的 ID 以某种方式被更改如下：

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

我不知道在哪里或如何设置。

为了确定，我添加了这样的测试行：

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}
    />
)

它确实像这样正确渲染：

<textarea id="tiny-react_75536734221618409165824" />

所以我不确定发生了什么。

有没有人遇到过这样的问题？

谢谢！

解决方法

假设您使用的是 TinyMCE React 组件，您可以将一个参数传递给 <Editor> 标签以设置 id：

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

编辑器的 ID。用于检索编辑器实例使用 tinymce.get('ID') 方法。默认为自动生成 UUID。