Так получилось что возможность загружать файлы через редактор CKeditor , по умолчанию отключена. В этом материале мы заставим наш WYSIWYG редактор загружать картинки и не только.

Если вы не знаете что это такое WYSIWYG редактор CKeditor, то в этой статье всё подробно написано.

Для проворота этого фокуса нам нужен CKeditor с установленным плагином вставки изображений (обычно встроена в редактор по умолчанию) и просто ровные руки.

1. Откройте файл в папке с редактором: \plugins\image\dialogs\image.js

Теперь нам необходимо кое-что найти в файле и поменять. Сразу скажу что то что мы будем искать порой версия от версии менялось, поэтому у вас должно быть одно из приведённых слов.

Надо искать: config.filebrowserBrowseUrl или filebrowserImageBrowseLinkUrl или id:"Upload" . При отсутствии точных совпадений, что вполне вероятно может быть, ищите слова Upload и File . рядом с найденным ищите такое выражение - hidden:true или hidden:!0 и меняйте его на hidden:false .

2. Для того чтобы проверить успешность выполнения предудыщего шага в редакторе нажмите кнопку вставки изображений - там должна появиться вкладка "Загрузить", открыв которую вы увидите кнопку и поле выбора файла. Работать на этом этапе оно не будет и это вполне обоснованно.

Внимание! Очень часто браузеры кэшируют файл image.js и после его изменения не перезагружают, поэтому попробуйте открыть сайт в другом браузере если не заметили изменений.

3. После того как вкладка у вас появилась переходим к следующему шагу.

В папке с редактором найдите файл config.js и откройте его. В содержимое файла внутрь выражения:

CKEDITOR.editorConfig = function(config)

т.е. где-то между фигурными кавычками "{ " и в конце файла "} " вставьте строчку:

config.filebrowserUploadUrl = "../upload.php";

В строчке выше../upload.php это путь к обработчику. Путь в данный момент идёт к файлу upload.php, который расположен на уровень выше папки с содержимым ckeditor. Скорее всего этот файл будет в корне вашего сайта, если вы понимаете всё устройство, то можете изменить по своему усмотрению.

Теперь, выходим из папки с содержимым редактора и создаём наш файл upload.php. Его наполняем таким содержимым:

Теперь ваш файл допустит к загрузке только изображения PNG и JPEG не превышающие 2 Мб (Сделано в плане безопасности). Также можете разобраться в коде и поменять всё на своё усмотрение.

Смое главное поменяйте в коде следующее:

В строке move_uploaded_file($_FILES["upload"]["tmp_name"], "images/".$name); поменяйте images/ на папку, куда будут загружаться изображения относительно файла upload.php .

Кроме того укажите в переменной $full_path поменяйте http://сайт/images/ на свой абсолютный путь к папке с загруженными изображениями.

4. На этом всё. Теперь загрузка картинок в 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