en
ru

Установка и регистрация

Описание возможностей интерфейса редактора

2021-08-15 19:02:59

Подготовка подписки в ЛК


В этой статья расскажу как установить и настроить редактор WebParts.

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

Личный кабинет содержит 4 основные секции:

  • Сгенерировать API-токен
  • Баланс
  • Ссылки на которых будет работать редактор
  • Настройка пароля


Чтобы ваша подписка заработала, необходимо пополнить баланс в секции баланс личного кабинета, также нужно прописать домены на которых будет работать редактор, в этом списке может быть записан http://localhost/ если вы планируете использовать редактор локально.

Настройка вашего сайта


 После получения API токена, пополнения баланса и настройки допустимых хостов, вам необходимо зайти в раздел Релизы

Раздел релизы

И скачайте последнюю версию Менеджера.

Релизы менеджера WebParts

Далее вам необходимо настроить на вашем сайте Менеджер следующим образом:



WebPartsManager
    .setEditorUrl('https://editor.wbps.ru/')
    .setApiKey('YOUR_TOKEN')
    .setConfig({
        autosave: true,
        lang: 'ru', // Тут вы можете передать язык интерфейса
        layout: false,
        css: ['https://wbps.ru/css/style.css']
    })
    .onFileUpload(function (formData, done) {
        $.ajax({
            url: '/uploadfile/',
            method: 'POST',
            data: formData,
            success: function (data) {
                done('https://wbps.ru/'+data.src);
            }
        });
    })
    .onSaveSettings(function (data, done) {
        $.ajax({
            url: '/demosavesettings/',
            method: 'POST',
            data: {
                data: data
            },
            success: function () {
                done();
            }
        });
    })
    .onSave(function (html, data) {
        $('[name="content"]').val(html);
    })
    .onLoad(function (done) {
        $.ajax({
            url: '/demoload/site/',
            method: 'POST',
            data: {},
            success: function (data) {
                data.html = 'HTML_CODE_HERE';
                done(data);
            }
        });
    })
    .render('editor')
;
Метод Описание
setEditorUrl С помощью этого метода вы можете указать на каком url адресе находится код редактора, на данный момент всегда нужно передавать занчение https://editor.wbps.ru/
setApiKey В этот метод нужно передать токен из личного кабинета.
setConfig В этот метод можно передать объект, с помощью которого можно сконфигурировать работу редактора:
- autosave - по умолчанию равен false, если этот параметр поставить true то каждое изменение будет сохраняться автоматически, это полезно если при изменении контента в редакторе нужно изменять HTML input
- layout - по-умолчанию равен true, если этот параметр выключен то в редакторе не будет работать логика шаблона, это полезно когда редактор используется для редактирования не целой страницы а только части
- css - это массив строк, в котором можно передать ссылки на css файлы которые будут подключены к редактору
- lang - язык интерфейса редактора, по-умолчанию en


onFileUpload Этот метод позволяет настроить колбэк, который будет вызван при загрузке изображений в редакторе
onSaveSettings Этот метод позволяет настроить колбэк, который вызывается при сохранении настроек редактора
onSave Этот метод позволяет настроить колбэк который будет вызван при сохранении контента редактора, тут вы можете либо отправлять XHR запрос на сервер либо писать результат в input
onLoad Колбэк зарегистрированный в этом методе вызывается при загрузке страницы, при успешной загрузке вы должны вызвать функцию done которая приходит в аргументах и передать в нее объект с полями html и settings в html - редактируемый контент, в settings - настройки редактора
render Этот метод запускает процесс рендеринга редактора, в качестве аргумента нужно передать строку с id элемента в который будет выведен редактор.


Если вы нашли ошибку в документации, или у вас есть идеи по улучшению редактора обращайтесь по адресу webparts@inbox.ru