⬅

Загрузка изображений на стороне сервера в редакторе TinyMCE на PHP

Редактор TinyMCE поддерживает локальный выбор файлов и загрузку изображений. Но чтобы сделать эти функции функциональными, вам необходимо выполнить некоторые настройки в параметрах конфигурации TinyMCE. Кроме того, для загрузки файла изображения на сервер требуется обработчик загрузки на стороне сервера. В этом уроке мы покажем вам, как разрешить пользователю загружать изображения в редакторе TinyMCE с помощью PHP .

В этом примере мы рассмотрим процесс обработки загрузки изображений в редакторе TinyMCE с помощью PHP. Также демонстрируется интеграция функции загрузки изображений в TinyMCE с использованием обратного вызова images_upload_handler и скрипта обработчика загрузки PHP. С помощью этой функции пользователь может загружать изображения с компьютера и вставлять их в редактор TinyMCE . Также будет предоставлен дружественный пользовательский интерфейс (UI) для упрощения загрузки изображений путем перетаскивания их с компьютера.

HTML-код

Определите элемент textarea ( myTextarea), чтобы добавить HTML-редактор TinyMCE на веб-страницу.

< textarea  id = "myTextarea" > textarea >

JavaScript-код

Сначала подключите JS-библиотеку плагина TinyMCE.

< скрипт  src = "tinymce/tinymce.min.js" >скрипт >

Определите обратный вызов обработчика загрузки изображений с помощью JavaScript.

  • Выбранный файл отправляется в серверный скрипт ( upload.php) для обработки функции загрузки.
  • Эта функция обработчика загрузки предоставляет 2 события: blobInfo и progress.
  • В случае успеха путь к загруженному файлу извлекается из объекта JSON ( json.location).
const image_upload_handler_callback = (blobInfo, progress) => new  Promise ((resolve, reject) => {
     const xhr = new XMLHttpRequest();
    xhr.withCredentials = false ;
    xhr.open( 'POST' , 'upload.php' );
    
    xhr.upload.onprogress = (e) => {
        прогресс(e.loaded / e.total * 100 );
    };
    
    xhr.onload = () => {
        если (xhr.status === 403 ) {
            reject({ message: 'Ошибка HTTP: ' + xhr.status, remove: true });
             return ;
        }
      
        если (xhr.статус < 200 || xhr.статус >= 300 ) {
            reject( 'Ошибка HTTP: ' + xhr.status);
             return ;
        }
      
        const json = JSON .parse(xhr.responseText);
      
        если (!json || тип json.location != 'string' ) {
            reject( 'Недопустимый JSON: ' + xhr.responseText);
             return ;
        }
      
        разрешить(json.location);
    };
    
    xhr.onerror = () => {
      reject( 'Загрузка изображения не удалась из-за ошибки XHR-транспорта. Код: ' + xhr.status);
    };
    
    const formData = new FormData();
    formData.append( 'файл' , blobInfo.blob(), blobInfo.filename());
    
    xhr.send(formData);
});

Инициализируйте TinyMCE и присоедините редактор к элементу textarea, указанному в selectorпараметре. Следующие параметры конфигурации включают функцию локального выбора файлов и загрузки изображений в редакторе TinyMCE.

  • Включите imageплагин и добавьте кнопку загрузки изображений на панель инструментов редактора.
  • Установите URL скрипта обработчика загрузки на стороне сервера ( upload.php) в опции images_upload_url . После определения этой конфигурации в диалоговом окне изображения появится вкладка «Загрузка».
  • Установите обратный вызов обработчика загрузки изображений в параметре images_upload_handler .
tinymce.init({
    selector: '#myTextarea' ,
    плагины: 'изображение' ,
    панель инструментов: 'отменить повтор | стили | полужирный курсив | выравнивание по левому краю выравнивание по центру выравнивание по правому краю выравнивание по ширине | отступ отступ | изображение' ,
    
    // без установленного images_upload_url вкладка «Загрузка» не будет отображаться 
    images_upload_url: 'upload.php' ,
    
    // переопределяем обработчик загрузки по умолчанию для имитации успешной загрузки
    обработчик_загрузки_изображений: обработчик_загрузки_изображений_обратный_вызов
});

Обработчик загрузки PHP (upload.php)

Этот upload.phpфайл управляет функцией загрузки изображений на стороне сервера с помощью PHP.

  • Укажите источники, которым разрешено отправлять HTTP-запросы этому скрипту-обработчику и загружать изображения на сервер.
  • Проверяйте источник HTTP-запроса и принимайте только разрешенные источники.
  • Проверьте, был ли файл загружен через HTTP POST, используя is_uploaded_file()функцию PHP.
  • Очистите имя входного файла с помощью preg_match()функции в PHP.
  • Проверьте расширение файла с помощью pathinfo()функции в PHP.
  • Загрузите файл на сервер с помощью move_uploaded_file()функции в PHP.
  • Ответьте на успешную загрузку с помощью JSON. Используйте ключ местоположения, чтобы указать путь к сохраненному ресурсу изображения.

 
// Только этим источникам разрешено загружать изображения 
$accepted_origins  = array( "http://localhost" ,  "https://www.codexworld.com" ,  "http://192.168.1.1" ,  "http://example.com" ); 
 
// Задайте папку для загрузки 
$imageFolder  =  "uploads/" ; 
 
if (isset( $_SERVER [ 'HTTP_ORIGIN' ])) { 
    // запросы с тем же источником не установят источник. Если источник установлен, он должен быть допустимым. 
    if ( in_array ( $_SERVER [ 'HTTP_ORIGIN' ],  $accepted_origins )) { 
        header ( 'Access-Control-Allow-Origin: '  .  $_SERVER [ 'HTTP_ORIGIN' ]); 
    } else { 
        header ( "HTTP/1.1 403 Origin Denied" ); 
        return; 
    } 
} 
 
// Не пытайтесь обработать загрузку по запросу OPTIONS 
if ( $_SERVER [ 'REQUEST_METHOD' ] ==  'OPTIONS' ) { 
    header ( "Access-Control-Allow-Methods: POST, OPTIONS" ); 
    return; 
} 
 
reset  ( $_FILES ); 
$temp  =  current ( $_FILES ); 
if ( is_uploaded_file ( $temp [ 'tmp_name' ])){ 
    /* 
      Если вашему скрипту необходимо получать файлы cookie, установите images_upload_credentials : true в 
      конфигурации и включите следующие два заголовка. 
    */ 
    // header('Access-Control-Allow-Credentials: true'); 
    // header('P3P: CP="Политики P3P нет."'); 
 
    // Очистка входных данных 
    if ( preg_match ( "/([^\w\s\d\-_~,;:\[\]\(\).])|([\.]{2,})/" ,  $temp [ 'name' ])) { 
        header ( "HTTP/1.1 400 Недопустимое имя файла." ); 
        return; 
    } 
 
    // Проверка расширения 
    if (! in_array ( strtolower ( pathinfo ( $temp [ 'name' ],  PATHINFO_EXTENSION )), array( "gif" , "jpg" ,  "jpeg" ,  "png" ))) { 
        заголовок( "HTTP/1.1 400 Недопустимое расширение." ); 
        return; 
    } 
 
    // Принять загрузку, если источника не было или если это принятый источник 
    $filetowrite  =  $imageFolder  .  $temp [ 'name' ]; 
    if( move_uploaded_file ( $temp [ 'tmp_name' ],  $filetowrite )){ 
        // Определить базовый URL 
        $protocol  = isset( $_SERVER [ 'HTTPS' ]) &&  $_SERVER [ 'HTTPS' ] ==  'on'  ?  "https://"  :  "http://" ; 
        $baseurl  =  $protocol  .  $_SERVER [ "HTTP_HOST" ] .  rtrim ( dirname ( $_SERVER [ 'REQUEST_URI' ]),  "/" ) .  "/" ; 
     
        // Ответить на успешную загрузку с помощью JSON. 
        // Используйте ключ местоположения, чтобы указать путь к сохраненному ресурсу изображения. 
        // { location : '/your/uploaded/image/file'} 
        echo  json_encode (array( 'location'  =>  $baseurl  .  $filetowrite )); 
    }else{ 
        header ( "HTTP/1.1 400 Upload failed." ); 
        return; 
    } 
} else { 
    // Уведомить редактора о том, что загрузка не удалась 
    header ( "HTTP/1.1 500 Server Error" ); 
} 
 
?>