Необходимость 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 нужен только если вы планируете кастомизировать редактор на уровне исходного кода.

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

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

• Как «учение о сновидении» связано с осознанными снами?
• Гобелен «Шотландия. Эйлен-Донан. Замок на берегу озера»
• Гобелен «Новая Зеландия. Озеро Ванака»
• Гобелен "Каменные круги Стоунхенджа"
• Гобелен "Загадочные сады Эдинбурга"
• Как «сталкинг» (выслеживание себя) соотносится с когнитивно-поведенческой терапией?
• Расширение Firefox
• Есть ли возможность установить или проверить наличие корневого сертификата(не стандртного, пользовательского) черезр расширение в браузере Firefox
• Почему «страх» считается главным врагом на пути воина?
• Гобелен "Греция. Санторини. Закат на белых террасах"
• Гобелен «Франция. Прованс. Лавандовые поля на рассвете»
• Гобелен «Германия. Замок Нойшванштайн. Сказка на фоне Альп»
• Гобелен «Венеция. Каналы и мосты на рассвете»
• Гобелен "Рыбинский музей-заповедник. Историческое наследие Ярославской области"
• Гобелен «Венеция. Каналы и мосты на закате»
• Гобелен "Тадж-Махал: Симфония любви и архитектуры"
• Гобелен "Особняк Понизовкиных, Ярославская область. Загадка египетского зала"
• Гобелен "Париж. Вечерний силуэт Эйфелевой башни"
• Гобелен "Музей ямщика, Ярославская область. История ямщицкого промысла"
• Гобелен "Волжская набережная, Ярославская область. Прогулки по берегу Волги"