Описание

Требования:

Версия DLE: любая (если не станет на вашу версию, обращайтесь.)

PHP: 7.1

PHP модуль: IonCube Loader

О плагине

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

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

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


Плюсы:
  • Настройка интерфейса визуальной части редактора, имеется ввиду левое меню, страницы, секции, блоки, стили, так как вы сами посчитаете нужным. Никаких ограничений нет.
  • Неограниченное создание пунктов меню, секций и блоков в редакторе.
  • Удобное добавление настроек стилей в редактор. Это делается в самом файле стилей того шаблона, который вы редактируете. Смотрите как это создается дальше...
  • Каждый пункт стилей имеет свои правила, которые настраиваете тоже вы. Допустим, нужно что бы админ мог изменять только цвет какого-то блока, и не мог загрузить изображение на фон, это легко делается через правила.
  • В шаблоне вы можете проставлять секции, в которых ставите блоки. Тем самым в редакторе появится возможность менять эти блоки местами в этой секции. Больше всего перестановка блоков подходит для LandingPage, но такая возможность есть.
  • Добавление элементов (полей), которые редактируются в редакторе. Вы создаете эти поля так же легко, указывая каждому полю свое правило, название и описание если нужно. Сейчас есть такие поля как: простой текст, большой текст, визуальный редактор от DLE Froal, изображение и меню. Эти элементы можно выводить в любом месте шаблона.
  • Для удобства редактирования, стили можно разбить на страницы или закрепить за секциями, что бы не было всех настроек оформления на одной странице.
  • При загрузке изображений через редактор, они грузятся в сам шаблон. При этом, если предыдущую картинку не удалять, а сразу выбрать к загрузке новую, то старая автоматически удалится.
  • При первом сохранении через редактор, создается бекап стилей, который находится в той же папке стилей.
Минусы:
  • Возможны баги, так как это первый релиз.
  • Парсинг секций и блоков происходит только в два прохода. Т.е. если находит подключение другого файла типа {include file="..."}, он и его захватит, но на третье вхождение не пойдет.
Недостатки:
  • Нет возможности редактировать сайт сразу находясь на нем. Но это в процессе разработки :D
Плагин работает всего с тремя шорт-кодами.
  • [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 - если присутствует этот элемент и в значении указано название страницы, то данные стили будут отображаться только при редактировании данной странице.

Скриншоты

Жалоба

Комментарии 5

  1. 0

    Алексей Сергеевич Шкодин

    Интересная вещь.
    Не отказался бы от подобного плагина, только для пользователей сайта.
    Чтобы они сами через настройки в своём профиле могли для себя настроить допустим цвет того или иного блока в своём же профиле.
    20.06.2021 14:30 Ответить
    1. 0

      Kylaksizov

      За доплату реализую без проблем.
      20.06.2021 21:01 Ответить
  2. +1

    mailarn

    Отличное решение, надо по тестировать. Интересно, почему разработчики DLE не добавляют подобный функционал. Уже много лет с каждой версией ни чего фактически нового нет.
    18.06.2021 07:41 Ответить
    1. 0

      Kylaksizov

      Тоже задавался этим вопросом раньше, но тем и лучше ?
      18.06.2021 08:19 Ответить
  3. +1

    Гость Андрей

    Оо что-то новенькое, свежее. Молодец!
    18.06.2021 05:06 Ответить

Добавить комментарий

    • Смайлы и люди
      Животные и природа
      Еда и напитки
      Активность
      Путешествия и места
      Предметы
      Символы
      Флаги

Похожие товары