Блог

Главная - Вопросы по программированию - Я пытаюсь использовать TinyMCE с динамически генерируемыми текстовыми областями, но идентификаторы всегда задаются чем-то другим

Я пытаюсь использовать TinyMCE с динамически генерируемыми текстовыми областями, но идентификаторы всегда задаются чем-то другим

#reactjs #tinymce #underscore.js #underscore.js-templating #tinymce-5

Вопрос:

Я использую подчеркивание, реакцию и TinyMCE для одной из своих игр.

Часть управления игрой имеет экран редактирования с несколькими текстовыми полями TinyMCE, поэтому мне нужен этот динамически сгенерированный идентификатор.

Вот почему в шаблоне я использую текстовые области с динамически генерируемыми идентификаторами, такими как этот:

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

что должно привести к текстовой области, подобной этой:

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

А затем я использую его, чтобы установить значение моего селектора в моем компоненте TinyMCE следующим образом:

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

Я понятия не имею, где и как это происходит.

Просто чтобы убедиться, я добавил тестовую строку, подобную этой:

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

И он действительно правильно отображается вот так:

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

Так что я не совсем понимаю, что происходит.

Кто-нибудь когда-нибудь сталкивался с подобной проблемой?

Спасибо!

Ответ №1:

Предполагая, что вы используете компонент TinyMCE React, существует параметр, который вы можете передать <Editor> тегу для установки id :

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

Идентификатор редактора. Используется для извлечения экземпляра редактора с помощью метода tinymce.get(«ИДЕНТИФИКАТОР»). По умолчанию используется автоматически сгенерированный UUID.

Комментарии:

1. Спасибо. Я использую компонент TinyMCE React, и я визуализирую его следующим образом: this.renderComponent(tinyMCEeditor, { game: this.model.attributes }, '.gameArea'); Итак, в примере , который они показывают id=uuid , я могу просто сделать id=gameId ? еще раз спасибо!

2. Чтобы ответить на ваш комментарий-да, поскольку это происходит в JavaScript так же, как ваш код селектора динамически создает селектор.

3. Поэтому я попробовал, return ( <Editor id='gameId' но он просто генерирует текстовую область, подобную этой, <textarea id="gameId"

4. Я должен был сделать это вот так: id={gameId.toString()}

Метки: ,