Laravel + CK-Editor + El FInder

Создаём шаблон editor.blade.php с содержимым:

resources/view/editor.blade.php

<!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>

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

routes/web.php

Route::get('/', function () {
    return view('main');
});

Скачиваем CKeditor здесь http://ckeditor.com/download Копируем его и jQuery.js в public/js

Подключаем CKeditor, в хэде прописываем следующее:

resources/view/editor.blade.php

<script src="{{ asset('/js/ckeditor/ckeditor.js') }}"
type="text/javascript" charset="utf-8" ></script>

Инициализируем CKEditor, в конце документа прописываем:

resources/view/editor.blade.php

<script>
 	   var editor = CKEDITOR.replace( 'editor1' );
</script>

Проверяем:

Интегрируем EL Finder (подробнее тут https://github.com/barryvdh/laravel-elfinder)

composer require barryvdh/laravel-elfinder

Добавляем в массив Сервис Провайдеров в app/config/app.php

Barryvdh\Elfinder\ElfinderServiceProvider::class

Публикуем командой

php artisan elfinder:publish

Создаём папку upload в папке public

Конфигурируем файл \vendor\barryvdh\laravel-elfinder\config\elfinder.php

Что бы elfinder.php перенёсся в в папку config в корне, можно попробовать выполнить команду php artisan vendor:publish

elfinder.php

<?php 
return array(
 'dir' => ['upload'], 
'disks' => [], 
'route' => [ 'prefix' => 'elfinder', 'middleware' => null,],
 'access' => 'Barryvdh\Elfinder\Elfinder::checkAccess', 
'roots' => null,

 'options' => array(
 'roots' => array( array( 'driver' => 'LocalFileSystem', 'path' => public_path().'/upload', 'URL' => 'http://test.loc/upload' ), ) ), 

'root_options' => array(), 
);

Не забываем поменять http://test.loc/upload на свой путь

Нициализируем El Finder в нашем скрипте инициализации CKEditor`a добавляем El Finder

<script>
    var editor = CKEDITOR.replace( 'editor1',{
        filebrowserBrowseUrl : '/elfinder/ckeditor'
    } );
</script>

Открываем на сайт и в редакторе выбираем «Изображение»

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

И откроется наш редактор

Есть мой репозиторий с установленым Ck-Editor и El Finder на laravel

https://github.com/Overfinch/Laravel-Ckeditor-Elfinder

Last updated 3 years ago