Блоковый редактор на Vue.js

24.11.2019

Установка

Установка доступна через загрузку последней версии из github репозитория

Использование

Интерфейс редактора

Редактор может компонавать любой набор блоков, каждый блок должен поддерживать следующий формат JSON:

{
    "admin_template": { /* Тут объект для создания компонента в админке */ },
    "frontend_template": "html код mustache шаблон",
    "name": "Название шаблона блока"
}

Содержимое admin_template должно быть в виде подобного JSON объекта:

{
    "title": {
        "name": "value",
        "title": "Заголовок",
        "component": "VueFieldString"
    }
}

Содержимое frontend_template, должно соответствовать admin_template:

<p>{{ title.value }}</p>

Интерфейс компонента:

label Заголовок над редактором
name: Параметр name редактора
value Сохраненное значение по умолчанию в виде строки "[]" - по умолчанию
error Ошибка, ,будет выведена под редактором
fieldParams Параметры редактора

Описание параметров fieldParams

Название поля Описание
blocksListUrl Урл по которому можно от сервера получить список блоков
blockUrl Урл адрес по которому можно получить детальные данные об одном блоке
css Массив ссылок на css файлы, которые нужно подключить к блоковому редактору

Использование в админ панели

Блоки редактируются внутри модальных окон:

все блоки имеют свое контекстное меню, которое открывается при наведении


Комментарии

admin
30.11.2019
Оставляйте свои комментарии, задавайте вопросы.

Чтобы оставить комментарий зарегистрируйтесь.

Похожие статьи