Необходимость API-ключа для TinyMCE

Описание товара

Tinymce написал: "A valid API key is required to continue using TinyMCE".

Сообщение "A valid API key is required to continue using TinyMCE" означает, что для использования редактора TinyMCE требуется действительный API-ключ. Это связано с тем, что TinyMCE, начиная с версии 5.10.0, требует API-ключа для доступа к облачным сервисам, таким как загрузка изображений, проверка орфографии и других функций, которые зависят от облачной инфраструктуры TinyMCE.

Как решить проблему:

Получите API-ключ:

перейдите на сайт TinyMCE;
зарегистрируйте аккаунт (если у вас его нет);
создайте новый API-ключ в разделе управления ключами.

Добавьте API-ключ в конфигурацию TinyMCE:

После получения ключа добавьте его в конфигурацию TinyMCE в вашем проекте. Пример:

javaScript

    
tinymce.init({
  selector: 'textarea',  // Селектор для текстового поля
  apiKey: 'ваш-api-ключ',  // Ваш API-ключ
  plugins: 'advlist autolink lists link image charmap print preview anchor',
  toolbar: 'undo redo | formatselect | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | help'
});

Проверьте лимиты использования:

Бесплатный план TinyMCE имеет ограничения на количество запросов. Если вы превысите лимит, вам нужно будет перейти на платный тариф.

Используйте локальные плагины (опционально):

Если вы не хотите использовать облачные функции TinyMCE, вы можете отключить их и использовать локальные плагины. Для этого удалите зависимость от API-ключа и настройте TinyMCE для работы без облачных сервисов.

Пример:

JavaScript

    tinymce.init({
  selector: 'textarea',
  plugins: 'advlist autolink lists link image charmap print preview anchor',
  toolbar: 'undo redo | formatselect | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | help',
// Отключение облачных функций
  images_upload_url: 'your-local-upload-endpoint',  // Локальный эндпоинт для загрузки изображений
  spellchecker_language: 'en',// Локальная проверка орфографии
});

Обновите TinyMCE:

Убедитесь, что вы используете последнюю версию TinyMCE, так как старые версии могут не поддерживать новые функции или иметь устаревшие конфигурации.

Если у вас возникнут дополнительные вопросы, обратитесь к документации TinyMCE или в поддержку TinyMCE.

В продолжении сообщения я передам текущие настройки tinyMCE при которых возникла ошибка API ключа(я привёл её выше). Поправьте пожалуйста настройки, при этом отключите только функции работа которых не возможна в отсутствии API ключа. Вот текущий JavaSript с настройками

JavaScript

    
<script>
tinymce.init({
  selector: '.wysiwyg-editor', // Класс для всех редакторов
  plugins: 'image media link code', // Плагины для изображений, видео и ссылок
  toolbar: 'undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | outdent indent | image media link code',// Панель инструментов
  images_upload_url: 'upload_image.php', // URL для загрузки изображений
  automatic_uploads: true, // Автоматическая загрузка изображений
  media_live_embeds: true, // Вставка видео (например, YouTube)
  file_picker_types: 'image media', // Типы файлов для выбора
});
</script>

Чтобы отключить только те функции TinyMCE, которые требуют API-ключа, и оставить остальные настройки без изменений, нужно убрать облачные зависимости, такие как проверка орфографии (spellchecker) и другие функции, которые используют облачные сервисы TinyMCE. В вашем текущем конфиге таких функций нет, но если они появятся, их нужно будет отключить.

Вот исправленный код с комментариями:

JavaScript

    
<script>
tinymce.init({
  selector: '.wysiwyg-editor', // Класс для всех редакторов
  plugins: 'image media link code', // Плагины для изображений, видео и ссылок
  toolbar: 'undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | outdent indent | image media link code', // Панель инструментов
  images_upload_url: 'upload_image.php', // URL для загрузки изображений (локальный эндпоинт)
  automatic_uploads: true, // Автоматическая загрузка изображений
  media_live_embeds: true, // Вставка видео (например, YouTube)
  file_picker_types: 'image media', // Типы файлов для выбора
// Отключение функций, требующих API-ключа
// Если вы используете spellchecker, его нужно отключить, так как он требует API-ключа
// spellchecker: false, // Раскомментируйте, если spellchecker включен
});
</script>

Что изменено:

API-ключ не требуется: в вашем текущем конфиге нет функций, которые требуют API-ключа (например, проверка орфографии или облачные сервисы TinyMCE). Поэтому код остаётся практически без изменений.
Локальная загрузка изображений: параметр images_upload_url указывает на локальный эндпоинт (upload_image.php), поэтому API-ключ не требуется для загрузки изображений.
Плагины: image, media, link, code работают локально и не требуют API-ключа.
Проверка орфографии: если вы используете плагин spellchecker, его нужно отключить, так как он требует API-ключа. В текущем конфиге он не используется, но если добавите, не забудьте установить spellchecker: false.

Что осталось без изменений: все локальные функции (загрузка изображений, вставка медиа, ссылки и код) работают без API-ключа.

Если в будущем вы захотите добавить функции, требующие API-ключа (например, проверку орфографии), вам нужно будет получить API-ключ и добавить его в конфигурацию:

JavaScript

    
apiKey: 'ваш-api-ключ',

С предложенными настройками ошибка ключа осталась.

Если ошибка "A valid API key is required to continue using TinyMCE" сохраняется даже после отключения функций, требующих API-ключа, это может быть связано с тем, что TinyMCE по умолчанию пытается загрузить некоторые облачные ресурсы или использует плагины, которые зависят от API-ключа. Давайте полностью отключим все облачные зависимости и убедимся, что TinyMCE работает в полностью локальном режиме.

Исправленный код с отключением всех облачных зависимостей:

JavaScript

    
<script>
tinymce.init({
  selector: '.wysiwyg-editor',//Класс для всех редакторов
  plugins: 'image media link code',//Плагины для изображений, видео и ссылок
  toolbar: 'undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | outdent indent | image media link code',//Панель инструментов
  images_upload_url: 'upload_image.php',//URL для загрузки изображений (локальный эндпоинт)
  automatic_uploads: true,//Автоматическая загрузка изображений
  media_live_embeds: true,//Вставка видео (например, YouTube)
  file_picker_types: 'image media',//Типы файлов для выбора
//Отключение всех облачных зависимостей
//1. Отключаем загрузку скриптов и стилей из облака TinyMCE
  tinymceScriptSrc: '/path/to/local/tinymce/tinymce.min.js',//Укажите путь к локальной версии TinyMCE
// 2. Отключаем проверку орфографии (если используется)
  spellchecker: false,
//3. Отключаем все облачные сервисы
  cloud_channel: 'off',//Отключаем облачные каналы
//4. Отключаем автоматическую загрузку emojis и других облачных ресурсов
  emoticons_database: 'off',
});
</script>

Что изменено:

Локальная загрузка TinyMCE: убедитесь, что вы используете локальную версию TinyMCE. Для этого скачайте TinyMCE с официального сайта и укажите путь к локальному файлу tinymce.min.js в параметре tinymceScriptSrc.
Отключение облачных зависимостей:
- параметр cloud_channel: 'off' отключает все облачные каналы TinyMCE;
- параметр spellchecker: false отключает проверку орфографии, если она была включена;
- параметр emoticons_database: 'off' отключает загрузку emojis из облака.
Локальная загрузка изображений: параметр images_upload_url указывает на локальный эндпоинт (upload_image.php), поэтому API-ключ не требуется.
Локальные плагины: плагины image, media, link, code работают локально и не требуют API-ключа.

Дополнительные шаги:

скачайте TinyMCE: если вы используете облачную версию TinyMCE, перейдите на локальную. Скачайте TinyMCE с официального сайта и разместите файлы на вашем сервере;
проверьте консоль браузера: Откройте консоль разработчика (F12) и проверьте, нет ли ошибок загрузки ресурсов. Убедитесь, что TinyMCE загружается с локального пути;
убедитесь, что API-ключ не используется: Убедитесь, что в вашем коде нет случайного указания API-ключа (например, через глобальные настройки или другие скрипты).

Если ошибка сохраняется:

проверьте, не используется ли TinyMCE через CDN (например, https://cdn.tiny.cloud/). Если да, переключитесь на локальную версию;
убедитесь, что вы используете последнюю версию TinyMCE, так как старые версии могут иметь устаревшие настройки.

Ошибка сохранилась: вот полный html:

PHP

    <?php
$question = array("question_text" => "Текст вопроса", "is_multiple_choice" => 1);
?><!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Редактирование вопроса</title>
    <!-- Подключение TinyMCE -->
    <script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
<script>
    tinymce.init({
        selector: '.wysiwyg-editor', // Класс для всех редакторов
        plugins: 'image media link code', // Плагины для изображений, видео и ссылок
        toolbar: 'undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | outdent indent | image media link code', // Панель инструментов
        images_upload_url: 'upload_image.php', // URL для загрузки изображений (локальный эндпоинт)
        automatic_uploads: true, // Автоматическая загрузка изображений
        media_live_embeds: true, // Вставка видео (например, YouTube)
        file_picker_types: 'image media', // Типы файлов для выбора
      
        // Отключение всех облачных зависимостей
        // 1. Отключаем загрузку скриптов и стилей из облака TinyMCE
        tinymceScriptSrc: '/path/to/local/tinymce/tinymce.min.js', // Укажите путь к локальной версии TinyMCE
        // 2. Отключаем проверку орфографии (если используется)
        spellchecker: false,
        // 3. Отключаем все облачные сервисы
        cloud_channel: 'off', // Отключаем облачные каналы
        // 4. Отключаем автоматическую загрузку emojis и других облачных ресурсов
        emoticons_database: 'off',
    });
</script>
</head>
<body>
    <!-- Форма редактирования вопроса -->
    <h1>Редактирование вопроса</h1>
    <form method="post" enctype="multipart/form-data">
        <div>
            <label>Текст вопроса:</label>
            <textarea name="question_text" class="wysiwyg-editor"><?= htmlspecialchars($question['question_text']) ?></textarea>
        </div>
        <div>
            <label>
                <input type="checkbox" name="is_multiple_choice" value="1" <?= $question['is_multiple_choice'] ? 'checked' : '' ?>>
                Несколько правильных ответов
            </label>
        </div>
        <div>
            <h2>Ответы:</h2>
            <?php foreach ($answers as $answer): ?>
                <div>
                    <label>Текст ответа:</label>
                    <textarea name="answers[<?= $answer['id'] ?>][text]" class="wysiwyg-editor"><?= htmlspecialchars($answer['answer_text']) ?></textarea>
                    <label>
                        <input type="checkbox" name="answers[<?= $answer['id'] ?>][is_correct]" value="1" <?= $answer['is_correct'] ? 'checked' : '' ?>>
                        Правильный ответ
                    </label>
                </div>
            <?php endforeach; ?>
        </div>
        <button type="submit">Сохранить</button>
    </form>
</body>
</html>

Ошибка "A valid API key is required to continue using TinyMCE" возникает из-за того, что вы используете облачную версию TinyMCE через CDN (https://cdn.tiny.cloud/1/no-api-key/tinymce/6/tinymce.min.js). Начиная с версии TinyMCE 5.10.0, для использования облачной версии редактора требуется API-ключ, даже если вы не используете облачные функции, такие как проверка орфографии или загрузка изображений в облако.

Решение проблемы:

Чтобы избавиться от ошибки, есть два варианта:

Вариант 1: Использовать локальную версию TinyMCE

Локальная версия TinyMCE не требует API-ключа и работает полностью на вашем сервере.

Скачайте TinyMCE:
- Перейдите на официальный сайт TinyMCE и скачайте последнюю версию TinyMCE.
- Распакуйте архив и разместите файлы на вашем сервере, например, в папке /path/to/local/tinymce/.
Обновите ваш HTML-код:Замените ссылку на облачную версию TinyMCE на локальную.
HTML
```
    
<script src="/path/to/local/tinymce/tinymce.min.js"></script>

  
```

Обновите конфигурацию TinyMCE: убедитесь, что вы не используете облачные функции.

JavaScript

    
tinymce.init({
    selector: '.wysiwyg-editor', // Класс для всех редакторов
    plugins: 'image media link code', // Плагины для изображений, видео и ссылок
    toolbar: 'undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | outdent indent | image media link code', // Панель инструментов
    images_upload_url: 'upload_image.php', // URL для загрузки изображений (локальный эндпоинт)
    automatic_uploads: true, // Автоматическая загрузка изображений
    media_live_embeds: true, // Вставка видео (например, YouTube)
    file_picker_types: 'image media', // Типы файлов для выбора
    // Отключение всех облачных зависимостей
    spellchecker: false, // Отключаем проверку орфографии
});

Убедитесь, что локальные файлы доступны: проверьте, что браузер может загрузить TinyMCE с вашего сервера. Например, откройте в браузере:
```
    
http://ваш-сайт/path/to/local/tinymce/tinymce.min.js

  
```

Вариант 2: Получить API-ключ (если хотите использовать облачную версию)

Если вы хотите использовать облачную версию TinyMCE, вам нужно получить API-ключ.

Получите API-ключ:
- Перейдите на TinyMCE Cloud и зарегистрируйтесь.
- Создайте API-ключ в разделе управления ключами.

Обновите ваш HTML-код: добавьте API-ключ в ссылку на TinyMCE.

    
<script src="https://cdn.tiny.cloud/1/ВАШ_API_КЛЮЧ/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>

Обновите конфигурацию TinyMCE: добавьте API-ключ в конфигурацию.

JavaScript

    
tinymce.init({
  selector: '.wysiwyg-editor',
  plugins: 'image media link code',
  toolbar: 'undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | outdent indent | image media link code',
  images_upload_url: 'upload_image.php',
  automatic_uploads: true,
  media_live_embeds: true,
  file_picker_types: 'image media',
  apiKey: 'ВАШ_API_КЛЮЧ',//Добавьте API-ключ
});

Итоговый код для локальной версии TinyMCE:

Если вы выбрали Вариант 1, вот как будет выглядеть ваш полный HTML-код:

PHP

    
<?php
$question = array("question_text" => "Текст вопроса", "is_multiple_choice" => 1);
?>
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Редактирование вопроса</title>
    <!-- Подключение TinyMCE (локальная версия) -->
    <script src="/path/to/local/tinymce/tinymce.min.js"></script>
    <script>
        tinymce.init({
            selector: '.wysiwyg-editor', // Класс для всех редакторов
            plugins: 'image media link code', // Плагины для изображений, видео и ссылок
            toolbar: 'undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | outdent indent | image media link code', // Панель инструментов
            images_upload_url: 'upload_image.php', // URL для загрузки изображений (локальный эндпоинт)
            automatic_uploads: true, // Автоматическая загрузка изображений
            media_live_embeds: true, // Вставка видео (например, YouTube)
            file_picker_types: 'image media', // Типы файлов для выбора
            spellchecker: false, // Отключаем проверку орфографии
        });
    </script>
</head>
<body>
    <!-- Форма редактирования вопроса -->
    <h1>Редактирование вопроса</h1>
    <form method="post" enctype="multipart/form-data">
        <div>
            <label>Текст вопроса:</label>
            <textarea name="question_text" class="wysiwyg-editor"><?= htmlspecialchars($question['question_text']) ?></textarea>
        </div>
        <div>
            <label>
                <input type="checkbox" name="is_multiple_choice" value="1" <?= $question['is_multiple_choice'] ? 'checked' : '' ?>>
                Несколько правильных ответов
            </label>
        </div>
        <div>
            <h2>Ответы:</h2>
            <?php foreach ($answers as $answer): ?>
                <div>
                    <label>Текст ответа:</label>
                    <textarea name="answers[<?= $answer['id'] ?>][text]" class="wysiwyg-editor"><?= htmlspecialchars($answer['answer_text']) ?></textarea>
                    <label>
                        <input type="checkbox" name="answers[<?= $answer['id'] ?>][is_correct]" value="1" <?= $answer['is_correct'] ? 'checked' : '' ?>>
                        Правильный ответ
                    </label>
                </div>
            <?php endforeach; ?>
        </div>
        <button type="submit">Сохранить</button>
    </form>
</body>
</html>

Рекомендация:

Если вам не нужны облачные функции (например, проверка орфографии или облачная загрузка изображений), используйте локальную версию TinyMCE. Это избавит вас от необходимости использовать API-ключ и сделает редактор полностью независимым от облачных сервисов.

Какую версию скачивать: Download TinyMCE Community или Download TinyMCE Dev Package?

Для большинства случаев, включая ваш, лучше скачивать TinyMCE Community. Вот подробное объяснение:

TinyMCE Community

Что это: Это стабильная версия TinyMCE, предназначенная для production-использования.
Особенности:
- включает только основные плагины и функциональность;
- оптимизирована для производительности;
- не требует API-ключа;
- подходит для большинства проектов, где не нужны расширенные функции из платной версии (Premium).
Когда выбирать:
- если вам нужен стабильный и легковесный редактор;
- если вы не планируете использовать расширенные функции, такие как продвинутая проверка орфографии, интеграция с Google Drive, облачная загрузка изображений и т.д.

TinyMCE Dev Package

Что это: Это версия для разработчиков, которая включает исходный код и дополнительные инструменты для кастомизации.
Особенности:
- включает исходный код TinyMCE;
- позволяет кастомизировать редактор на уровне кода;
- подходит для разработчиков, которые хотят вносить изменения в ядро TinyMCE или создавать собственные плагины.
Когда выбирать:
- если вы планируете кастомизировать TinyMCE на глубоком уровне;
- если вы разрабатываете собственные плагины или интеграции;
- если вам нужен доступ к исходному коду для отладки или модификации.

Рекомендация для вашего случая

Поскольку вы используете TinyMCE для стандартного WYSIWYG-редактора с базовыми функциями (загрузка изображений, вставка медиа, ссылки и т.д.), вам подойдёт TinyMCE Community. Она стабильна, проста в использовании и не требует API-ключа.

Как скачать TinyMCE Community

Перейдите на страницу загрузки TinyMCE: Download TinyMCE.
Выберите TinyMCE Community.
Скачайте архив (ZIP).
Распакуйте архив на ваш сервер, например, в папку /path/to/local/tinymce/.
Подключите TinyMCE в вашем проекте, указав путь к локальному файлу:
HTML
```
    
<script src="/path/to/local/tinymce/tinymce.min.js"></script>

  
```

Пример структуры папок после скачивания

Структура папок TinyMCE

    
/path/to/local/tinymce/
   ├── icons/
   ├── langs/
   ├── plugins/
   ├── skins/
   ├── themes/
   ├── tinymce.min.js
   └── ...

Итог

TinyMCE Community — это лучший выбор для вашего проекта;
TinyMCE Dev Package нужен только если вы планируете кастомизировать редактор на уровне исходного кода.

Другие товары

Вы так же можете прочитать следующие статьи:

Необходимость API-ключа для TinyMCE

104 549 руб.

Описание товара

Другие товары