reactjs - 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">
</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!
解决方案
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.
推荐阅读
- oracle - 如何删除oracle utf文件中的输入
- c++ - 内部类引用的编译问题
- angular - 基于值变化的角度条件验证器
- javascript - 使用 Javascript 检测 URL 和重定向 URL
- ibm-mq - 如何在 ibm mq 中显示 curdepth 达到其最大深度的本地队列
- google-sheets-formula - Google 表格 - 基于 Today() 函数找不到我的查询函数有什么问题
- android - 如何在 ExoPlayer 中检测视频是垂直的还是水平的
- r - 按管道中的位置提取子串
- java - 如何注入在另一个 jar 中执行的接口的实现
- angular - 如何使用 single-spa.js 在多个应用程序中实现单个 httpinterceptors 实例