Файловый менеджер + текстовый редактор для Laravel

Всем, привет! Недавно я создал сайт на Laravel (потом переделал его в блог), но столкнулся с проблемой, которая была связана с публикацией статей.

Из-за этого, я даже хотел переделать его под CMS-систему WordPress, но мои знания DOM, Ajax и PHP позволили избежать мне все эти трудности. И сегодня, я хочу поделиться с вами тем, как именно мне это удалось сделать.

Я привык к WordPress, поэтому даже CMS-система на Node.js - Ghost казалась мне не такой удобной, как WP. Слишком много надо было писать своими руками, но любовь к высокой производительности была куда выше, чем любовь к тормозным сайтам на WordPress.

Поэтому в первую очередь, я установил пакет laravel-page-speed и
laravel-responsecache. Но процесс публикации статей был очень долгим, в силу того, что изначально я сделал все неправильно.

Тогда я снова создал сайт на WP для того, чтобы слизать оттуда некоторые фишки, которые пригодились бы мне в работе.

Я увидел, что когда пишешь статью на WordPress - текстовое поле textarea растягивается в зависимости от текста. Еще, когда скорлишь статью - редактор сайта прилипает к вверху и позволяет вставить любой файл в нужное место.

По моему - это очень круто, поэтому точно такой же функционал я решил реализовать на своем сайте. Не точь в точь, но хотя бы более или менее таким же удобным, как на WordPress.

Стек моего сайта - Laravel 5.8 (это моя любимая версия данного PHP-фреймворка) + UIkit 3 и jQuery + Ajax.

Шаг 1. Установка текстового редактора

В качестве текстового редактора я выбрал также, как и на WordPress - TinyMCE. Скачал с официального сайта и установил.

Шаг 2. Растягивание поля textarea

Для того, чтобы растянуть поле textarea в зависимости от текста, я воспользовался JS-плагином - autoResize();. Это простой плагин, который очень легко интегрировать на сайт даже обывателю в WEB.

Он позволяет задать как минимальную высоту для textarea, так и максимальную. По этой ссылке вы можете посмотреть примеры его работы, скачать, а также почитать инструкцию по интеграции.

Шаг 3. Файловый менеджер для TinyMCE

Динамическое сохранение постов у меня и до этого было настроено, но картинки в текстовый редактор я не мог вставлять до тех пор, пока не установил RESPONSIVE filemanager и FancyBox.

Таким образом, в текстовый редактор TinyMCE можно загрузить любые файлы, с контролируемыми расширениями.

Я все от и до расписывать не стал, т. к. даже если вы обладаете минимальными знаниями веб-разработки - с этой задачей справиться вам не составит никакого труда.

И еще, забыл упомянуть, - я прописал id'шнику редактора соответствующий стиль и атрибут от UIkit за счет DOM, поэтому при скорле страницы плагины редактора прилипают к меню.

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