В прошлом материале, я уже писал о подключении к CKEditor 4 плагина подсветки синтаксиса. Но так же писал что опишу загрузку картинок через визуальный редактор. Все делается достаточно просто.
Вступление
Оговорюсь сразу, что не использую сторонние библиотеки для большего контроля над самим подключением и редактором, так и для того чтобы не лепить библиотеку там, где она не нужна.
Так же, не рекомендую подключать стили и подгрузку скрипта редактора на всех страницах сайта. Подключайте все это только на страницах где редактор отображается. Так вы не увеличите нагрузку на сеть, не понизит скорость загрузки страницы, а соответственно не получите пессимизацию от поисковиков за более тяжелые страницы.
Итак, подключаем.
Скачиваем редактор CKEditor 4 с сайта
Скачивание редактора происходит архивом с официального сайта. В моем случае, чаще всего я выбираю версию Full Package. Да, она жирнее, но меньше шансов столкнутся с тем что чего-то не хватает и нужно прописывать это вручную.
Easy Image - это платная опция, при которой вам не нужно будет вручную прописывать загрузку картинок на сервер, картинки будут сжиматься через сервера компании разрабатывающей сам редактор, а так же отдаваться через их CDN. Это хорошие плюшки, но платные. Стоимость $17 ежемесячно не целесообразна для маленьких и пет-проектов. Но выход есть - собственный контроллер загрузки картинок и прописывания хендлера загрузки в самом редакторе.
Скачанный архив, точнее папку ckeditor внутри него, помещаем в папку public. Таким образом путь к файлу ckeditor.js будет выглядеть как /public/js/ckeditor/ckeditor.js
Подключение редактора в шаблон
Для подключения только на нужных страницах редактора, в лейауте шаблона /resources/views/layouts/front.blade.php, в теге <head> добавляю секцию additional_head
...
<head>
<title>Some website</title>
...
@yield('additional_header')
...
</head>
...
Теперь, в необходимой нам странице, на которой и нужен редактор, мы можем в секцию подключить стиль и JS код редактора.
@section('additional_head')
<script src="/js/ckeditor/ckeditor.js"></script>
@endsection
Вместо этих манипуляций, более простой вариант - вставить тот же вызов скрипта прямо в конце кода страницы, без создания дополнительной секции.
Создаем контроллер на стороне сервера, для сохранения загружаемого файла
Дальше, следующим шагом, создаем контроллер, принимающий картинку и сохраняющий ее в нужное место. Командой к артисану создаем контроллер с названием Fileuploader
php artisan make:controller Fileuploader
В примере я не буду усложнять логику дополнительными проверками, но в боевых проектах вам стоит проверять более тщательно загружаемые файлы, логировать их загрузки и т.д. Но чтобы не загружать сейчас все этим, упрощенный контроллер будет выглядеть так
<?php namespace App\Http\Controllers;
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\Storage;
use Illuminate\Support\Facades\File;
use Illuminate\Support\Facades\Request;
class Fileuploader extends Controller {
public function upload(){
//этим шагом мы не разрешаем загрузку файлов не авторизованным пользователям
if (Auth::guest()) abort(403);
//эта строка вам понадобится, если у вас стоит расширение DebugBar и оно включено.
//чтобы не мешало загрузке файлов
//app('debugbar')->disable();
$callback = $_GET['CKEditorFuncNum'];
$error = '';
$file = Request::file('upload');
$filename = md5(date("YmdHis").rand(5,50));
$extension = $file->getClientOriginalExtension();
//в следующих двух строках мы можем провести постобработку файла
//как пример - прогоняем через сервис сжатия и перезаписываем файл
//\Tinify\setKey(config('tinify.key'));
//\Tinify\fromFile($file->getPathName())->toFile($file->getPathName());
//Сохраняем файл на диск
Storage::disk('uploaded')->put($filename.'.'.$extension, File::get($file));
$http_path = '/images/uploaded/'.$filename.".".$extension;
//при этом учитывайте, что в моем случае я часто использую символическую ссылку images в папке
//public, ведущую на /storage/images, а в ней уже лежит папка uploaded
//Возвращаем в CKEditor результат, который он калбеком вставит в редактор.
echo "<script type=\"text/javascript\">window.parent.CKEDITOR.tools.callFunction(".$callback.", \"".$http_path."\", \"".$error."\" );</script>";
}
}
Прописываем роутинг и убираем ошибку CSRF-токена
Теперь, чтобы этот контроллер работал, нам нужно создать правило роутинга. Идем в файл /routes/web,php и добавляем строку:
Route::match(['get','post'],'/uploader',[\App\Http\Controllers\Fileuploader::class,'upload']);
Осталось два простых шага, чтобы все это заработало.
Убираем проверку csrf токена для контроллера загрузки картинок. Продвинутые могут модифицировать CKEditor расширив его передачу еще и токеном цсрф, но мы для примера его отключим все же.
Идем в файл app/Http/Middleware/VerifyCsrfToken.php и в переменной с массивом значений $excepts добавляем значение равное нашему урлу загрузки:
protected $except = [
'/uploader', //эту строку
];
Таким образом, загрузка файла на сервер, без csrf-токена не вызовет уже ошибки со стороны сайта. Да, в некоторой мере это упущение безопасности, но для примера этот момент нам необходимо упростить.
Инициируем установку редактора на элемент
Остался последний шаг - загрузка редактора с параметрами на загрузку картинки. Для этого, в коде вызова редактора, который я задаю на той же странице, используются следующий код:
<script>
CKEDITOR.replace( 'field_body', {
filebrowserUploadMethod: 'form',
filebrowserUploadUrl: '/uploader',
//..
} );
</script>
в этом примере, редактор подключится на элемент с ID - field_body, для вашего случая используйте тот элемент, который вам необходим. Как пример это просто текстовая область вида:
<textarea id="field_body" placeholder="Введите ваш текст"></textarea>
Это все, что нужно для подключения самого редактора CKEditor 4 в проект, с возможностью загружать картинки из него. После этого, в редакторе после клика на иконку с картинкой, вы увидите попап с вкладкой Загрузить, выбираете файл и жмете кнопку Загрузить на сервер, после кнопкой Ок картинка вставляется в место установленного курсора.
Кто делает иначе, или хочет описать особенности, пишите в комментариях.
Отзывы
Пока нет комментариев
Для того чтобы оставить комментарий, авторизуйтесь.