The requested page is not available for the requested platform. You are viewing the content for Default platform.

Image Dialogs

  • 2 min to read

Image dialogs include the Insert Image and Change Image dialogs that allow end users to insert an image to editor content and change an image, respectively.

A dialog can be invoked in the design view in the following ways.

Dialog Structure

ASPxHtmlEditor-Images-InsertImageDialog

An image dialog contains three tabs listed below.

Tab caption Tab visibility Description
From your computer HtmlEditorInsertImageDialogSettings.ShowFileUploadSection Allows end-users to upload their local files.
From the gallery HtmlEditorFileManagerSettingsBase.Enabled Allows end-users to add to editor content images from the predefined gallery. You can customize the gallery settings using the HtmlEditorInsertImageDialogSettings.SettingsImageSelector and HtmlEditorInsertImageDialogSettings.SettingsImageUpload properties.
From the web (URL) HtmlEditorInsertMediaDialogSettings.ShowInsertFromWebSection Allows end-users to upload files from the web.

When the More options check box is selected, the dialod displayes the settings section, which allows end-users to customize image settings (size, position, description and style settings such as margins, border and CSS class). You can hide the check box by setting the HtmlEditorInsertImageDialogSettings.ShowMoreOptionsButton property to false.

Dialog Customization

You can customize dialog settings programmatically by using the HtmlEditorDefaultDialogSettings.InsertImageDialog property; or using the design-time ASPxHtmlEditor Designer.

Designer_InsertImage

Online Demo

Image Selector

ASPxHtmlEditor provides a comprehensive API, allowing you to operate with the opened dialog programmatically on the client side.

Dialog UI elements

Client method

Common Dialog UI elements

ASPxClientHtmlEditorMediaDialogBase.GetMoreOptionsCheckBox

ASPxClientHtmlEditorDialogBase.GetOkButton

ASPxClientHtmlEditorDialogBase.GetCancelButton

"From the web (URL)" UI elements

ASPxClientHtmlEditorLinkDialog.GetUrlTextBox

"Common Settings" Tab UI elements

GetSizeComboBox()

ASPxClientHtmlEditorMediaDialogBase.GetPositionComboBox

ASPxClientHtmlEditorImageDialog.GetWrapTextCheckBox

ASPxClientHtmlEditorImageDialog.GetDescriptionTextBox

"Style Settings" Tab UI elements

ASPxClientHtmlEditorEditElementDialog.GetTopMarginTextBox

ASPxClientHtmlEditorEditElementDialog.GetRightMarginTextBox

ASPxClientHtmlEditorEditElementDialog.GetBottomMarginTextBox

ASPxClientHtmlEditorEditElementDialog.GetLeftMarginTextBox

ASPxClientHtmlEditorEditElementDialog.GetBorderWidthSpinEdit

ASPxClientHtmlEditorEditElementDialog.GetBorderColorColorEdit

ASPxClientHtmlEditorEditElementDialog.GetBorderStyleComboBox

ASPxHtmlEditor-ClientAPI-InsertImage-1