Загрузить файлы на сервер в CKeditor. Загрузить файлы на сервер в CKeditor Ckeditor выбор изображения на сервере

Скачал я с официального сайта хороший WYSIWYG редактор и наткнулся на неприятную неожиданность — в функционале по-умолчанию нет возможности загружать файлы. Как это исправить, читаем далее.

Теперь нам надо создать этот файлик upload.php в папке самого редактора. Если Вы качали с официального сайта, то эта папка будет samples.

Откройте файл upload.php и вставьте туда код из этого файла:

Данный код ограничивает загрузку файлов по типу, то есть допускаются только jpg и png. Чтобы расширить список допустимых расширений, обратите внимание на строку: else if (($_FILES[‘upload’][«type»] != «image/jpeg») AND ($_FILES[‘upload’][«type»] != «image/jpeg») AND ($_FILES[‘upload’][«type»] != «image/png»))

Также этот код ограничивает размер загружаемых файлов. Смотрите строку else if ($_FILES[‘upload’][«size»] == 0 OR $_FILES[‘upload’][«size»] > 2050000)

Число 2050000 это кол-во допустимых байтов. Чтобы перевести в мегабайты, считайте так: 2050000 байт / 1024 / 1024 = 1.9 мб. То есть, чтобы увеличить ограничение до 10мб, просто считайте так: 10мб * 1024кб * 1024б = 10485760.

Теперь нам осталось просто поменять пару значений и запустить редактор наново. Все в том же файле upload.php найдите такую строку: move_uploaded_file($_FILES[‘upload’][‘tmp_name’], «files/».$name);

Она отвечает за то, куда будут грузиться наши файлы. В данном случае в папку files. Вы же можете указать любую другую папку, но убедитесь, что она существует. Если её нет — создайте.

Теперь найдите такую строку: $full_path = ‘http://localhost/ckeditor/samples/files/’.$name;

Её следует изменить на Ваше значение. То есть менять надо сам URL к загруженным файлам «http://localhost/ckeditor/samples/files/ «.

Ну вот и всё. Как видим завести эту функцию оказалось очень легко и достаточно быстро.

В небольших проектах, где требуется минимальный функционал от wysiwyg редактора, я использую стандартную версию Ckeditor . ckeditor позволяет вставлять в текст изображения, загружая их перед этим на сервер. Обычно этим занимается файловый менеджер, который открывается при нажатии на кнопку "Обзор файлов"

Но иногда функционал файлового менеджера избыточен. Требуется просто выбрать файл на компьютере, загрузить его и вставить в текст. Для этого используется плагин uploadimage , который необходимо подключить к ckeditor. Удобно сразу сконфигурировать ckeditor с этим плагином, чтобы не мучаться с разрешением зависимостей этого плагина. Uploadimage добавляет новую вкладку в окно вставки изображения.

Чтобы плагин заработал, нужно в конфигурационном файле ckeditor config.js необходимо прописать путь до обработчика загрузок изображений на сервере.

public/ckeditor/config.js

Config.filebrowserUploadUrl = "/upload-image";

На этом настройка ckeditor завершена. Теперь реализуем функционал загрузки на сервере. Добавим новый роут в файле web.php . Для упрощения и наглядности, код загрузки изображения я не буду выносить в отдельный контроллер, а напишу прямо роутах.

routes/web.php

Route::post("upload-image", function(\Illuminate\Http\Request $request, Illuminate\Contracts\Validation\Factory $validator) { $v = $validator->make($request->all(), [ "upload" => "required|image", ]); $funcNum = $request->input("CKEditorFuncNum"); if ($v->fails()) { return response(" window.parent.CKEDITOR.tools.callFunction({$funcNum}, "", "{$v->errors()->first()}"); "); } $image = $request->file("upload"); $image->store("public/uploads"); $url = asset("storage/uploads/".$image->hashName()); return response(" window.parent.CKEDITOR.tools.callFunction({$funcNum}, "{$url}", "Изображение успешно загружено"); "); });

Т.к. ckeditor присылает изображение POST запросом, а laravel проверяет CSRF токен, который ckeditor не передаёт, необходимо вписать только что созданный роут в исключения, чтобы laravel не проверял token:

app/Http/Middleware/VerifyCsrfToken.php

", "");

Скрипт выбора загруженных изображений imagebrowse.php .

Выбор файла .img_list { } .img_list a { display:inline-block; position:relative; text-align:center; width:200px; height:200px; border:1px solid #ccc; vertical-align:middle; margin:0 5px 5px 0; } .img_list a img{ max-width:200px; max-height:200px; } .img_list a div{ position:absolute; background:rgba(255,255,255,0.5); color:#000; bottom:0; width:100%; }