Разработка
Dark Stack
286

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

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

В закладки

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

Проблема

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

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

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

Задача

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

​Текстовый редактор сайта на WordPress DarkStack

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

Решение

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

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

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

​Текстовый редактор TimyMCE DarkStack

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

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

Растягивание поля textarea по высоте DarkStack

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

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

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

Файловый менеджер RESPONSIVE filemanager DarkStack

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

Заключение

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

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

Прижатые плагины TinyMCE к меню DarkStack

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

<div class="uk-card uk-card-default uk-card-body" style="z-index: 980;" uk-sticky="offset: 100; bottom: #top"><!-- Code... --></div>

Материал опубликован пользователем.
Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "author_name": "Dark Stack", "author_type": "self", "tags": [], "comments": 0, "likes": 0, "favorites": 7, "is_advertisement": false, "subsite_label": "dev", "id": 107494, "is_wide": true, "is_ugc": true, "date": "Mon, 17 Feb 2020 17:25:37 +0300", "is_special": false }
Создать объявление на vc.ru
Aliexpress Россия
Комиссия 0% за продажи на AliExpress: как это работает
В марте мы приняли экономически сложное, но правильное в нынешних условиях решение — мы обнулили комиссию для всех…
0
Комментариев нет
Популярные
По порядку

Прямой эфир