Подключаем CKEditor к Laravel 5.1 и интегрируем в него файловый менеджер elFinder
Доброго времени суток. Как мы знаем без WYSIWYG редактора нам не создать хороший блог, не построить интернет-магазин, да и просто писать и редактировать статьи на сайт с помощью редактора удобней. Поэтому в данной статье я остановлюсь на подключении CKEditor к Laravel. Затем мы в него интегрируем файловый менеджер elFinder, который нам понадобиться для удобной вставки картинок и для загрузки этих самых картинок.
Вначале подготовимся.
Подготовка.
Я не буду останавливаться на установке Laravel. Материала по данному вопросу в интернете достаточно. Давай те создадим view с названием main.blade.php в папке resources/views следующего содержания:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CKEditor</title>
{{-- Bootstrap --}}
<link href="{{ asset('/css/bootstrap.css') }}" rel="stylesheet">
{{-- jQuery --}}
<script src="{{ asset('/js/jquery.js') }}" type="text/javascript" charset="utf-8" ></script>
{{-- JS Bootstrap --}}
<script src="{{ asset('/js/bootstrap.js') }}" type="text/javascript" charset="utf-8" ></script>
</head>
<body>
<div class="container">
<h1>Добавляем поддержку CKEditor</h1>
<div class="row">
<div class="col-md-12">
<textarea name="editor1" id="editor1">
</textarea>
</div>
</div>
</div>
</body>
</html>
Тут мы подключили bootstrap, чтобы не останавливаться на верстке. И добавили элемент <textarea>, в который и вставим редактор CKEditor.
Теперь создадим роут, отредактируйте файл route.php, который находится в app/Http.
Route::get('/', function () {
return view('main');
});
Проверим, перейдем на наш сайт. Вот как получилось у меня:
Отлично, теперь приступим к подключени CKEditor.
Подключение CKEditor.
Для начала нам необходимо скачать сам редактор. Скачать CKEditor можно с официального сайта.
Выбираем необходимый пакет и жмем «Download CKEditor». Я выбрал FullPackage.
Распаковываем скачанный архив в папку ckeditor. И переносим ее в наш проект в папку public/js
Вот как у меня выглядит структура:
Теперь можно подключить CKEditor. Для этого переходим в наш файл представления main.blade.php и вставляем следующую строку в секцию head
<script src="{{ asset('/js/ckeditor/ckeditor.js') }}"
type="text/javascript" charset="utf-8" ></script>
Все подключили, теперь нужно сам редактор инициализировать. Для этого в конец нашего представления вставляем:
<script> var editor = CKEDITOR.replace( 'editor1' ); </script>
Ну вот и все, мы с Вами подключили CKEditor на место нашего textarea. Обратите внимание, при инициализации редактора мы указали «editor1», что означает CKEditor будет отображаться в элементе с id= «editor1».
Проверим:
Отлично, теперь интегрируем файловый менеджер elFinder.
Интеграция файлового менеджера elFinder
Для интеграции elFinder мы воспользуемся пакетом barryvdh/laravel-elfinder. Как установить пакет данный пакет Вы можете посмотреть на github.
А вот на настройках я остановлюсь. Если Вы все сделали как описано документации, то у Вас должен появиться файл elfinder.php в папке config.
Допустим мы хотим чтобы файлы загружались в папку public/upload.
Отредактируем файл конфигурации следующим образом:
return array(
/*
|--------------------------------------------------------------------------
| Upload dir
|--------------------------------------------------------------------------
|
| The dir where to store the images (relative from public)
|
*/
'dir' => 'files',
/*
|--------------------------------------------------------------------------
| Filesystem disks (Flysytem)
|--------------------------------------------------------------------------
|
| Define an array of Filesystem disks, which use Flysystem.
| You can set extra options, example:
|
| 'my-disk' => [
| 'URL' => url('to/disk'),
| 'alias' => 'Local storage',
| ]
*/
// 'disks' => [
//
// ],
/*
|--------------------------------------------------------------------------
| Routes group config
|--------------------------------------------------------------------------
|
| The default group settings for the elFinder routes.
|
*/
'route' => [
'prefix' => 'elfinder',
'middleware' => null, //Set to null to disable
middleware filter
],
/*
|--------------------------------------------------------------------------
| Access filter
|--------------------------------------------------------------------------
|
| Filter callback to check the files
|
*/
'access' => 'Barryvdh\Elfinder\Elfinder::checkAccess',
/*
|--------------------------------------------------------------------------
| Roots
|--------------------------------------------------------------------------
|
| By default, the roots file is LocalFileSystem, with the
above public dir.
| If you want custom options, you can set your own roots
below.
|
*/
'roots' => null,
/*
|--------------------------------------------------------------------------
| Options
|--------------------------------------------------------------------------
|
| These options are merged, together with 'roots' and passed
to the Connector.
| See
https://github.com/Studio-42/elFinder/wiki/Connector-configuration-options-2.1
|
*/
'options' => array(
'roots' => array(
array(
'driver' => 'LocalFileSystem',
'path' => public_path().'/upload',
'URL' => 'http://test.loc/upload'
),
)
),
Тут в принципе и объяснять нечего, кроме свойства option. В которое мы добавили массив root. Массив root содержит еще один массив, где driver — указывает в нашем случае, что используется локальная файловая система, path — путь к нашим файлам, url — адрес для наших файлов.
С настройкой закончили, теперь для CKEditor нужно указать файловый менеджер. Для этого открываем файл представления main.blade.php и редактируем код инициализации CKEditor следующим образом:
<script>
var editor = CKEDITOR.replace( 'editor1',{
filebrowserBrowseUrl : '/elfinder/ckeditor'
} );
</script>
Давайте проверим:
Открываем на сайт и в редакторе выбираем «Вставить картинку»
Откроется диалог вставки, жмем «Выбор на сервере»
Откроется окно файлового менеджера elFinder. Как видим картинок у нас еще нет. Поэтому давайте загрузим картинку:
После того, как картинка будет успешно загружена, два раза кликаем по ней и в окне диалога вставки изображения мы можем данную картинку отредактировать, после чего жмем «Ok»:
Все наша картинка появилась в редакторе:
Как видите ничего сложного нет.
Но есть один подводный камень, с которым я столкнулся. У меня связка nginx — Apache. И nginx настроен таким образом: всю статику он кэширует, а динамический контент обрабатывает apache, который возвращает результат в nginx. Вот в такой ситуации возникает следующая ошибка при вызове elFinder.
Как решить данную проблему я уже расскажу в следующей статье. Так, что не пропускайте выхода новых статей.
Вы можете вступить в группу во Вконтакте, или следить за мной в Facebook, или Twitter.
[…] времени суток. В статье «Подключаем CKEditor к Laravel 5.1 и интегрируем в него файловый …» Мы рассмотрели как подключить CKEditor в Laravel, а также […]
Как вызвать всплывание окна файлового редактора?
Т.е. как вызвать в коде нажатие на кнопке «выбор на сервере»?
Как это было в TinyMCE:
onclick=»tinyBrowserPopUp(‘image’,’img’)»
В этом примере в input[id=img] после выбора картинки вставится её адрес
Как сделать такое в CKEditor?
Здравствуйте, cделал как в туториале, но выводиться новость с тегами((почему так может быть?
При сохранении текста не обрабатываете его htmlspecialchars()?
Здравствуйте!
Як изменить высоту редактора?
Измените высоту элемента куда вставляете редактор. (Но могу ошибаться)
Поменяйте высоту элемента, куда вставляете редактор (но могу ошибаться)
а у меня такая ошибка
https://www.dropbox.com/s/8sumvcc37d9pj63/%D0%91%D0%B5%D0%B7%D1%8B%D0%BC%D1%8F%D0%BD%D0%BD%D1%8B%D0%B9.png?dl=0