По умолчанию веб редактор документа использует следующие "стандартные" UI-диалоги:

• WebUiDocumentEditorSettingsDialogJS - UI-диалог, который позволяет просматривать и редактировать настройки редактора документа.
• WebUiDocumentEditorViewSettingsDialogJS - UI-диалог, который позволяет просматривать и изменять настройки отображения страниц в редакторе документа.
• WebUiDocumentInfoDialogJS - UI-диалог, который позволяет просматривать и редактировать информацию о документе.
• WebUiPrintDocxDocumentSettingsDialogJS - UI-диалог, который позволяет печатать страницы документа DOCX, отображаемого в веб редакторе документа.
• WebUiDocumentPageSettingsDialogJS - UI-диалог, который позволяет просматривать и редактировать настройки страницы документа.
• WebUiDocumentPageColumnsSettingsDialogJS - UI-диалог, который позволяет просматривать и редактировать настройки столбцов страницы документа.
• WebUiDocumentTextPropertiesDialogJS - UI-диалог, который позволяет просматривать и редактировать свойства выделенного текста в документе.
• WebUiDocumentParagraphPropertiesDialogJS - UI-диалог, который позволяет просматривать и редактировать свойства выделенного абзаца в документе.
• WebUiDocumentParagraphIndentationSettingsDialogJS - UI-диалог, который позволяет просматривать и редактировать отступы для абзацев документа.
• WebUiDocumentParagraphLineSpacingSettingsDialogJS - UI-диалог, который позволяет просматривать и редактировать межстрочный интервал для абзацев документа.
• WebUiDocumentParagraphPaginationSettingsDialogJS - UI-диалог, который позволяет просматривать и редактировать настройки пагинации для абзацев документа.

1. Стандартные UI-диалоги на базе Bootstrap

Готовые к использованию стандартные UI-диалоги на базе Bootstrap хранятся в файле Vintasoft.Imaging.Office.Dialogs.Bootstrap.js.
Если в веб редакторе документа необходимо использовать "стандартные" UI-диалоги Bootstrap, веб-приложение должно иметь:

• ссылку на CSS-файл стилей Bootstrap, например:
  
  • HTML

  <link rel="stylesheet" type="text/css" href="~/lib/bootstrap/dist/css/bootstrap.css">
  

• ссылки на библиотеки jQuery и Bootstrap, например:
  
  • HTML

  <script src="~/lib/jquery/dist/jquery.min.js" type="text/javascript"></script>
  <script src="/lib/bootstrap/dist/js/bootstrap.bundle.min.js" type="text/javascript"></script>
  

• ссылки на файлы Vintasoft.Imaging.js, Vintasoft.Imaging.css, Vintasoft.Imaging.Office.js, Vintasoft.Imaging.Office.css, Vintasoft.Imaging.Dialogs.Bootstrap.js и Vintasoft.Imaging.Office.Dialogs.Bootstrap.js, например:
  
  • HTML

  <script src="~/js/Vintasoft.Imaging.js" type="text/javascript"></script>
  <link rel="stylesheet" type="text/css" href="~/js/Vintasoft.Imaging.css">
  <script src="~/js/Vintasoft.Imaging.Office.js" type="text/javascript"></script>
  <link rel="stylesheet" type="text/css" href="~/js/Vintasoft.Imaging.Office.css">
  <script src="~/js/Vintasoft.Imaging.Dialogs.Bootstrap.js" type="text/javascript"></script>
  <script src="~/js/Vintasoft.Imaging.Office.Dialogs.Bootstrap.js" type="text/javascript"></script>
  

Внешний вид UI-диалогов можно настроить с помощью CSS-стилей Bootstrap.

Ниже представлен снимок экрана стандартного UI-диалога "Find text" (Найти текст) на базе Bootstrap:

2. Стандартные UI-диалоги на базе jQuery UI

Готовые к использованию стандартные UI-диалоги на базе jQuery UI хранятся в файле Vintasoft.Imaging.Office.Dialogs.jQueryUI.js.
Если в веб редакторе документа необходимо использовать "стандартные" UI-диалоги jQueryUI, веб-приложение должно иметь:

• ссылку на CSS-файл стилей jQuery UI, например:
  
  • HTML

  <link rel="stylesheet" type="text/css" href="~/js/jquery-ui-css/jquery-ui.min.css">
  

• ссылки на библиотеки jQuery и jQuery UI, например:
  
  • HTML

  <script src="~/js/jquery-3.3.1.min.js" type="text/javascript"></script>
  <script src="~/js/jquery-ui.min.js" type="text/javascript"></script>
  

• ссылки на файлы Vintasoft.Imaging.js, Vintasoft.Imaging.css, Vintasoft.Imaging.Office.js, Vintasoft.Imaging.Office.css, Vintasoft.Imaging.Dialogs.jQueryUI.js и Vintasoft.Imaging.Office.Dialogs.jQueryUI.js, например:
  
  • HTML

  <script src="~/js/Vintasoft.Imaging.js" type="text/javascript"></script>
  <link rel="stylesheet" type="text/css" href="~/js/Vintasoft.Imaging.css">
  <script src="~/js/Vintasoft.Imaging.Office.js" type="text/javascript"></script>
  <link rel="stylesheet" type="text/css" href="~/js/Vintasoft.Imaging.Office.css">
  <script src="~/js/Vintasoft.Imaging.Dialogs.jQueryUI.js" type="text/javascript"></script>
  <script src="~/js/Vintasoft.Imaging.Office.Dialogs.jQueryUI.js" type="text/javascript"></script>
  

Внешний вид UI-диалогов можно настроить с помощью CSS-стилей jQuery UI.

Ниже представлен снимок экрана стандартного UI-диалога "Find text" (Найти текст) на базе jQuery UI:

3. Пользовательские стандартные UI-диалоги

Если готовые к использованию стандартные UI-диалоги на базе Bootstrap, jQuery UI или JavaScript не подходят для вашего интерфейса или задачи, вы можете использовать пользовательские стандартные UI-диалоги в веб редакторе электронных таблиц.

Если необходимо создать пользовательский UI-диалог для другой библиотеки пользовательского интерфейса, рекомендуется создать UI-диалог в виде оболочки вокруг готовой к использованию UI-панели (WebUiDocumentEditorSettingsPanelJS, WebUiDocumentEditorViewSettingsPanelJS, WebUiDocumentInfoPanelJS, WebUiPrintDocxDocumentSettingsPanelJS, WebUiDocumentPageSettingsPanelJS, WebUiDocumentPageColumnsSettingsPanelJS, WebUiDocumentTextPropertiesPanelJS, WebUiDocumentParagraphPropertiesPanelJS, WebUiDocumentParagraphIndentationSettingsPanelJS, WebUiDocumentParagraphLineSpacingSettingsPanelJS, WebUiDocumentParagraphPaginationSettingsPanelJS). В этом случае нет необходимости реализовывать логику, связанную с UI-диалогом (например, печать изображений), поскольку панель уже содержит всю необходимую логику.

Можно также создать пользовательский UI-диалог с нуля, но в этом случае необходимо реализовать как пользовательский интерфейс, так и логику работы UI-диалога.