CKEditor. Добавление (загрузка) изображений с помощью кнопки расширенного редактора

В небольших проектах, где требуется минимальный функционал от 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%; }