Заказать обратный звонок
Сборщик плагинов и шаблонов из разных источников.

На сайте вы найдете все плагины,
что существуют для DLE и все шаблоны.
DLE-X » Плагины для DLE » Dle Editor - визуальный редактор для DLE

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

  • ID плагина: 299
Описание Отзывы и вопросы (0)

Описание

Требования:

Версия 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 - если присутствует этот элемент и в значении указано название страницы, то данные стили будут отображаться только при редактировании данной странице.

Скриншоты

Источник: https://kylaksizov.ru/202-dle-editor-vizualnyj-redaktor-dlja-dle.html
Прокомментировать
Кликните на изображение чтобы обновить код, если он неразборчив
Другие плагины:
AMP страницы из версии для печати
отзывов {comments-num}
AMP страницы из версии для печати
Плагин генерации AMP страниц для DLE, теперь на основе версии для печати. Перед тем как устанавливать плагин, сделайте резервную копию файла
Плагины для DLE
Dle Forum Next Generation 3.0
отзывов {comments-num}
Dle Forum Next Generation 3.0
1. Общая информация: DLE Forum – это форум обладающий большими функциональными возможностями. Форум предназначен для использования с DataLife
Плагины для DLE
Light House Remaster - шаблон доски объявлений недвижимости на dle
отзывов {comments-num}
Light House Remaster - шаблон доски объявлений недвижимости на dle
Light House Remaster – адаптивный шаблон доски объявлений недвижимости для системы DLE. Это переверстка оригинального
Шаблоны для DLE
Big Board Remaster – шаблон доски объявлений на DLE
отзывов {comments-num}
Big Board Remaster – шаблон доски объявлений на DLE
Big Board Remaster – адаптивный шаблон доски объявлений для системы DLE. Это переверстка оригинального шаблона Big Board.
Шаблоны для DLE
Расширенный переключатель мобильных шаблонов
отзывов {comments-num}
Расширенный переключатель мобильных шаблонов
Представляем вашему вниманию Advanced Mobile Templates Switch (AMTS-tcse) - расширенный переключатель мобильных шаблонов позволяющий вместо шаблона
Плагины для DLE