Встречайте Webix 11.1! На этот раз мы рады представить вам новый виджет – Rich Text Editor. Мы много работали над созданием удобного инструмента для работы с контентом, и теперь он доступен для наших пользователей. Мы также расширили функциональные возможности наших комплексных виджетов – File Manager, Document Manager, SpreadSheet, Scheduler, Diagram, ToDo, Gantt и User Manager. А теперь давайте рассмотрим все обновления более подробно.
Rich Text Editor – новый виджет Webix
Мы хотели бы начать обзор релиза Webix 11.1 с нового виджета – Rich Text Editor. Виджет представляет собой WYSIWYG инструмент, который помогает пользователям создавать контент – стилизовать текст, добавлять изображения, вставлять ссылки, использовать эмодзи или специальные символы. Итак, если вы хотите реализовать какую-либо функциональность, предполагающую создание контента в своем проекте, или же ваше приложение подразумевает работу с текстом – Rich Text Editor – это то, что вам нужно.
Виджет разработан с помощью фреймворка Webix Jet и его можно инициализировать двумя способами – как отдельное Jet приложение или же как Webix компонент. В базовой конфигурации пользовательский интерфейс Rich Text Editor состоит из панели инструментов и текстового редактора. Виджет позволяет использовать меню вместе с панелью инструментов. И то, и другое можно кастомизировать – добавлять кнопки на панель инструментов, оставлять только необходимые группы кнопок, использовать заранее созданное меню, а также задавать для него параметры.
Давайте подробнее рассмотрим возможности, которые предоставляет виджет:
- два режима отображения: classic и document;
- готовые скины: Material, Mini, Flat, Compact, Contrast;
- удобная стилизация текста: пользователи могут выбирать шрифт и его размер, высоту строки, цвет текста, фон и выравнивание;
- функция печати;
- маркированные и нумерованные списки;
- вставка ссылок/изображений/эмодзи/специальных символов;
- полноэкранный режим;
- выравнивание и редактирование изображений;
- возможность использования меню вместе с панелью инструментов;
- возможности импорта/экспорта;
- кастомизация, включая возможность установки пользовательских локалей.
Более подробную информацию о новом виджете можно найти в документации.
Обновления Webix Core
Начиная с версии 11.1, Webix поддерживает раскладки QWERTY (по умолчанию), QWERTZ и AZERTY для создания горячих клавиш. Это означает, что пользователи библиотеки теперь могут использовать все символы из данных раскладок для настройки горячих клавиш. Например, комбинация Ctrl+Ö, включающая специальный символ Ö, будет распознана как допустимая горячая клавиша.
Обновления File Manager и Document Manager
На этот раз File Manager получил новую функцию, которая облегчает работу с большими наборами данных. Теперь вы можете задать количество элементов (файлов/папок), которые ваше приложение будет загружать, когда пользователь открывает определенную папку или использует строку поиска.
Добавьте свойство limit в настройки конфигурации вашего File Manager и определите количество элементов, которые вы хотите загрузить:
view: "filemanager",
url: "path-to-fs",
limit: 100
})
Если свойство limit определено и размер набора данных превысит лимит, рядом с хлебными крошками в правой части File Manager (это раздел виджета, где отображается содержимое текущей папки) появится предупреждающая иконка 
.
Обратите внимание, что иконка не отображается, если количество загруженных файлов не превышает лимит.
Наведите курсор на иконку, и вы увидите подсказку, указывающую, сколько файлов из общего числа загружено.
Когда вы устанавливаете свойство limit в вашем File Manager, это не значит, что пользователи больше не смогут загрузить все файлы (по крайней мере, если ваши требования и спецификации это позволяют — все можно настроить). Они по-прежнему могут загрузить весь набор данных через пользовательский интерфейс, нажав на иконку обновления и выбрав опцию «Reload without limit» в меню (иконка обновления находится в правой части виджета рядом с хлебными крошками).
Когда пользователь выбирает «Reload without limit», в папку загружаются все файлы и только обычное обновление (“Refresh”) без опций становится доступным до заполнения кэша. Обратите внимание, что размер кэша по умолчанию составляет всего 10 папок.
Установка лимитов при загрузке доступна и в Document Manager. Задать свойство limit здесь можно так же, как и в File Manager.
view: "docmanager",
url: "path-to-fs",
limit: 100
})
В дополнение к свойству limit у File Manager и Document Manager теперь есть новый API метод selectFile, который позволяет выбирать файлы по ID.
В этом релизе мы добавили в File Manager и Document Manager отображение полного пути к файлу в превью — это упрощает поиск и навигацию. Выберите файл или папку в каталоге или в результатах поиска. Нажмите кнопку Preview в верхней панели (top bar), и вы увидите местоположение файла в разделе Information. Если вы хотите перейти к папке с выбранным файлом, просто кликните по пути и вы окажетесь там.
Обновления SpreadSheet
В версии Webix 11.1 API SpreadSheet был расширен новыми методами: addFormat, getFormat, setFormatName и removeFormat. Методы предоставляют дополнительные возможности для настройки форматирования — добавление формата, получение названия формата, установка и удаление формата. Метод setFormat, который появился в более ранней версии SpreadSheet и используется для установки пользовательских форматов для ячеек, теперь возвращает также название формата. Этот метод по-прежнему доступен в API для обратной совместимости. В данном примере кода вы можете увидеть, как работают новые методы.
Еще одним важным улучшением SpreadSheet является поддержка режима безопасности XSS. Он ограничивает использование как простого, так и сгенерированного математическими функциями HTML в ячейках в целях безопасности. Режим также накладывает некоторые ограничения на вставку изображений в ячейки с помощью метода IMAGE (разрешены только формат base64 и загрузка с того же домена).
Добавьте параметр xssSafe в конфигурацию SpreadSheet и установите для него значение true, чтобы включить режим (по умолчанию параметр имеет значение false).
view:"spreadsheet",
xssSafe:true
});
При включенном режиме безопасности XSS SpreadSheet будет экранировать простой HTML, HTML, сгенерированный математическими методами, и HTML в числовом формате.
Виджет предоставляет ряд математических функций, которые могут генерировать HTML по умолчанию: IMAGE, HYPERLINK, SPARKLINE, CHECKBOX, RADIO.
Вы также можете использовать registerMathMethod, в котором теперь доступен новый параметр generateHTML. Если вы установите для него значение true, то ваш метод сможет генерировать HTML в режиме безопасности XSS (убедитесь, что после знака равенства в ячейке указан только ваш метод и ничего больше, например, такая запись =IMAGE(…) сработает, а такая =IMAGE(…)&»text» будет экранирована).
view:"spreadsheet",
xssSafe:true
});
spreadsheet.registerMathMethod("bold", v =>`<b>${v}</b>`, null, true);
Другие обновления SpreadSheet включают возможность использовать сочетания клавиш Ctrl + колесо прокрутки мыши для масштабирования, а также улучшенный UX для форматированных дат (если в ячейке отображается только время без даты, редактор дат откроется как timepicker).
Обновления Scheduler
На этот раз обновления коснулись способа отображения категорий в Scheduler в режиме Units. Этот режим позволяет группировать события в различные категории или блоки. Названия категорий располагаются на горизонтальной шкале панели событий.
В более ранних версиях режим Units не поддерживал горизонтальную прокрутку. Поэтому все категории, независимо от их количества, размещались в пределах доступной ширины. Это было не очень удобно при использовании большого количества категорий, так как доступное пространство для отдельных блоков уменьшалось по мере добавления новых категорий.
В версии 11.1 доступна горизонтальная прокрутка и возможность задавать минимальную ширину для блоков. По умолчанию минимальная ширина составляет 300px. Вы можете изменить ее значение или отключить.
Используйте следующие параметры в конфигурации для того, чтобы настроить ширину блоков:
view: "scheduler",
date: new Date(2020, 9, 1, 0, 0, 0),
url: "https://docs.webix.com/calendar-backend/",
mode: "units",
units: { minWidth: 120 },
timeline: true,
override: new Map([[scheduler.services.Backend, MyBackend]]),
});
Если вы хотите отключить минимальную ширину и не использовать прокрутку, установите для minWidth значение равное 0:
view: "scheduler",
date: new Date(2020, 9, 1, 0, 0, 0),
url: "https://docs.webix.com/calendar-backend/",
mode: "units",
units: { minWidth: 0 },
timeline: true,
override: new Map([[scheduler.services.Backend, MyBackend]]),
});
Другие обновления
В дополнение к новым функциональным возможностям, упомянутым в статье, ниже представлено краткое описание других обновлений виджетов:
- ToDo: улучшенная индикация поиска;
- Diagram: Ctrl+ +, Ctrl+ —, Ctrl+ 0 горячие клавиши для увеличения, уменьшения и сброса масштабирования;
- User Manager: cursor: pointer для кликабельных чекбоксов в матрицах;
- Gantt: задачи, выходящие за рамки обозначенной шкалы, теперь не отображаются в области диаграммы.
Полный список обновлений Webix можно посмотреть на странице What’s new page.
Чтобы получить саму библиотеку, обновите ее через npm, Client area или кликнете по большой фиолетовой кнопке ниже.
