Подключаем CKEditor к Laravel 5.1 и интегрируем в него файловый менеджер elFinder

Ромчик
8

laravel

Доброго времени суток. Как мы знаем без 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');
	});

Проверим, перейдем на наш сайт. Вот как получилось у меня:

01

Отлично, теперь приступим к подключени CKEditor.

Подключение CKEditor.

Для начала нам необходимо скачать сам редактор. Скачать CKEditor можно с официального сайта.

02

Выбираем необходимый пакет и жмем «Download CKEditor». Я выбрал FullPackage.

Распаковываем скачанный архив в папку ckeditor. И переносим ее в наш проект в папку public/js

Вот как у меня выглядит структура:

03

Теперь можно подключить 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».

Проверим:

04

Отлично, теперь интегрируем файловый менеджер 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>

Давайте проверим:

Открываем на сайт и в редакторе выбираем «Вставить картинку»

05

Откроется диалог вставки, жмем «Выбор на сервере»

06

Откроется окно файлового менеджера elFinder. Как видим картинок у нас еще нет. Поэтому давайте загрузим картинку:

07

После того, как картинка будет успешно загружена, два раза кликаем по ней и в окне диалога вставки изображения мы можем данную картинку отредактировать, после чего жмем «Ok»:

09

Все наша картинка появилась в редакторе:

10

Как видите ничего сложного нет.

Но есть один подводный камень, с которым я столкнулся. У меня связка nginx — Apache. И nginx настроен таким образом: всю статику он кэширует, а динамический контент обрабатывает apache, который возвращает результат в nginx. Вот в такой ситуации возникает следующая ошибка при вызове elFinder.

11

Как решить данную проблему я уже расскажу в следующей статье. Так, что не пропускайте выхода новых статей.

Вы можете вступить в группу во Вконтакте, или следить за мной в Facebook, или Twitter.

Понравилась статья? Поделись с друзьями.
  • Add to favorites
  • Добавить ВКонтакте заметку об этой странице
  • Twitter
  • Facebook
  • Мой Мир
  • LiveJournal
  • Одноклассники
  • Блог Я.ру
  • MySpace
  • FriendFeed
  • В закладки Google
  • Google Buzz
  • Яндекс.Закладки
  • Reddit
  • StumbleUpon
  • Technorati
  • del.icio.us
  • БобрДобр
  • LinkedIn
  • Memori.ru
  • Сто закладок
  • Blogger

  • ElFinder. Проблема «Unable to connect to backend» | Все о WEB программировании - 18.07.2015 в 08:20

    […] времени суток. В статье «Подключаем CKEditor к Laravel 5.1 и интегрируем в него файловый …» Мы рассмотрели как подключить CKEditor в Laravel, а также […]

  • Максим - 15.08.2015 в 16:56

    Как вызвать всплывание окна файлового редактора?
    Т.е. как вызвать в коде нажатие на кнопке «выбор на сервере»?

    Как это было в TinyMCE:
    onclick=»tinyBrowserPopUp(‘image’,’img’)»
    В этом примере в input[id=img] после выбора картинки вставится её адрес

    Как сделать такое в CKEditor?

  • Валерий - 02.02.2016 в 04:20

    Здравствуйте, cделал как в туториале, но выводиться новость с тегами((почему так может быть?

    • Ромчик - 02.02.2016 в 07:15

      При сохранении текста не обрабатываете его htmlspecialchars()?

  • Sawa4` - 22.07.2016 в 10:25

    Здравствуйте!
    Як изменить высоту редактора?

    • Ромчик - 22.07.2016 в 10:30

      Измените высоту элемента куда вставляете редактор. (Но могу ошибаться)

  • Ромчик - 22.07.2016 в 10:34

    Поменяйте высоту элемента, куда вставляете редактор (но могу ошибаться)

  • ©2012-2018 По всем вопросам обращайтесь через форму обратной связи

    Яндекс.Метрика