Dle Editor - визуальный редактор для DLE (1 Viewer)

[Борис Димитров]

Описание​

Требования:​

Версия DLE:любая
PHP:7.1
PHP модуль:IonCube Loader

О плагине​

Dle Editor - это мощный визуальный редактор для простого редактирования шаблона сайта. Благодаря ему, владелец сайта не имеющий опыта в верстке, сможет легко управлять разметкой сайта, изменять фоны, цвет, размер текста, переставлять блоки и многое друг. И все это делается через админ панель в понятном интерфейсе.

Спойлер: Смотреть полностью

Но прежде чем воспользоваться редактором, верстальщику необходимо интегрировать шаблон в данный редактор. Это делается легко, благодаря видео урокам, которые появятся в скором времени здесь.

Возможности Dle Editor​

Плюсы:

• Настройка интерфейса визуальной части редактора, имеется ввиду левое меню, страницы, секции, блоки, стили, так как вы сами посчитаете нужным. Никаких ограничений нет.
• Неограниченное создание пунктов меню, секций и блоков в редакторе.
• Удобное добавление настроек стилей в редактор. Это делается в самом файле стилей того шаблона, который вы редактируете. Смотрите как это создается дальше...
• Каждый пункт стилей имеет свои правила, которые настраиваете тоже вы. Допустим, нужно что бы админ мог изменять только цвет какого-то блока, и не мог загрузить изображение на фон, это легко делается через правила.
• В шаблоне вы можете проставлять секции, в которых ставите блоки. Тем самым в редакторе появится возможность менять эти блоки местами в этой секции. Больше всего перестановка блоков подходит для LandingPage, но такая возможность есть.
• Добавление элементов (полей), которые редактируются в редакторе. Вы создаете эти поля так же легко, указывая каждому полю свое правило, название и описание если нужно. Сейчас есть такие поля как: простой текст, большой текст, визуальный редактор от DLE Froal, изображение и меню. Эти элементы можно выводить в любом месте шаблона.
• Для удобства редактирования, стили можно разбить на страницы или закрепить за секциями, что бы не было всех настроек оформления на одной странице.
• При загрузке изображений через редактор, они грузятся в сам шаблон. При этом, если предыдущую картинку не удалять, а сразу выбрать к загрузке новую, то старая автоматически удалится.
• При первом сохранении через редактор, создается бекап стилей, который находится в той же папке стилей.

Минусы:

• Возможны баги, так как это первый релиз.
• Парсинг секций и блоков происходит только в два прохода. Т.е. если находит подключение другого файла типа {include file="..."}, он и его захватит, но на третье вхождение не пойдет.

Недостатки:

• Нет возможности редактировать сайт сразу находясь на нем. Но это в процессе разработки

Плагин работает всего с тремя шорт-кодами.

• [section="Название секции"]...[/section] - создание секции в шаблоне, внутри которой может быть блоки, смотрите далее.
• [box-id="Название блока"]...[/box-id] - блок, который должен располагаться внутри секции. id - уникальный идентификатор для каждого блока, любое название. Главное, что бы у каждого блока был свой Id.
• {e::element_name} - редактируемый элемент. Каждый элемент содержит уникальное название. element_name - произвольное название, у каждого элемента должно быть разное название. Элементы могут находится как в блоке, так и в любой части кода. Элементы, находящиеся не в блоке называются - независимые элементы.

Инструкция по интеграции шаблона​

1. Создайте файл manifest.jsonв корне шаблона с таким содержимым.{
"style": "styles",
"img_dir": "images",
"author": "<a href=\"https:\/\/kylaksizov.ru\">Kylaksizov V.<\/a>",
"name": "Стандартный шаблон DLE (Green)",
"description": "Это стандартный шаблон от DLE, настроенный под редактор DLE Editor",
"poster": "images\/Green.jpg",
"version": "1.0",
"pages": {
"Главная страница": {
"file": "main",
"description": "Главная страница сайта"
},
"Меню": {
"file": "modules\/menu",
"description": "Описание для этой страницы"
}
},
"e": {
"menu": {
"title": "Меню сайта",
"type": "menu",
"value": ""
},
"banner": {
"title": "Изображение баннера",
"type": "image",
"value": ""
},
"test_element": {
"title": "Название элемента",
"description": "Это описание для элемента, будет отображено в редакторе",
"type": "text",
"value": ""
}
}
}

Описание элементов файла манифест:​

style - название файла стилей без окончания .css, которые находятся в папке css вашего шаблона.
img_dir - название папки с картинками.
author - автор шаблона. Можно использовать html.
name - название шаблона соответственно.
description - описание шаблона.
poster - обложка шаблона (не обязательно).
version - версия шаблона.

pages - объект, содержащий страницы/пункты меню в редакторе. Ключ - название страницы.

• file - если указано, то редактор будет собирать секции и блоки, которые находятся в этом файле.
  Если не указывать, то редактор просто отобразит стили, принадлежащие к этой странице/пункту.
• description - описание или инструкция для этой страницы, будет отображено в редакторе.

e - элементы, которые могут изменятся в редакторе и расположены в шаблоне. Ключ элемента - его уникальное имя, например если ключ имеет значение test_el, то в шаблоне он должен быть прописан в таком формате {e::test_el}

• title - название ключа, отображается в редакторе при редактировании.
• type - тип элемента. Возможные значения:
  text - строчный редактируемый текст;
  longText - многострочный редактируемый текст;
  editor - html, редактируемый через визуальный редактор от DLE;
  image - редактируемое изображение;
  menu - редактируемое меню.
• split - может присутствовать, только если элемент имеет тип menu. Задает разделитель пунктов меню, список или просто ссылка. По умолчанию ставится список <li>, если необходима просто ссылка, укажите значение a.
• value - значение элемента. При создании можно оставить пустым, так как через редактор оно все равно изменится.

2. В файле стилей создайте псевдокласс со своими правилами. Кто не знает что такое псевдокласс :root, посмотрите информацию тутили на другом источнике, ничего сложного.

Особенности css правил:​

В псевдоклассе :rootсоздавайте переменные, которые дальше применяйте в своих стилях. Важно знать, что инструкция для переменной задается выше её самой. Т.е. создаете комментарий с таким содержимым например:/*{"title":"Фон сайта","description":"Выберите цвет или изображение для общего фона сайта","type":"bg"}*/
Ниже создаете саму переменную. Например:--main-bg: #c90076 url('../images/xuf1Q2QEjgNJUQDjL0RyEzsh.jpg') no-repeat 0 0;
Таким образом, в редакторе сразу же появится этот настраиваемый стиль.
Давайте разберем наш комментарий.
Думаю все знают, что комментарий в css задается вот так: /* тут комментарий */
И в содержимое комментария, нам необходимо поместить JSON строку.
Что бы редактор принял Ваши правила, соблюдайте формат указанный выше. Без пробелов и с определенными ключами. Рассмотрим их

• title - название стиля.
• description - описание стиля, если необходимо.
• type - тип свойства. Типы свойств могут быть следующими:
  bg - редактирование фона, в том числе и цвет;
  color - только цвет;
  bgSize - размер и позиция фона;
  size - размер в px,%, em, vh, vw;
  float - число с плавающей точкой, от -N до N;
  int - целое число, от -N до N;
  display - inline-block, block, flex, grid;
  textAlign - для выравнивания текста;
  order - настройка бордюра.
  
• section - если присутствует этот элемент и в значении указано название страницы, то данные стили будут отображаться только при редактировании данной странице.

Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.