From v2010 vol 2.6 you can specify the CSS class for images inserted via the Insert Image dialog. For this purpose the cssClass field has been added to the GetDialogData_InsertImageForm function within the InsertImageForm.ascx file.
This example demonstrates how to:
- specify a CSS class for the inserted image;
- specify a .css document for an ASPxHtmlEditor;
- customize a default dialog.
Default dialog forms have been copied to the web project for further modification (for details, see Customization of Default Dialog Forms). The ASPxLabel control and ASPxComboBox controls have been added to the ImagePropertiesForm.ascx file markup. The combo box contains tree items specifying names of CSS classes. The GetDialogData_InsertImageForm function has been modified to get the selected CSS class name from the combo box. The image gets CSS class settings from the file, specified via FilePath property (Document.css in our case).
The image below shows the result:
Image may be NSFW.
Clik here to view.
Note
Starting from version 2013.2, image dialogs provide an ability to specify an image CSS class without copying the dialog form to the project. Set the ShowImageStyleSettingsSection property to true to display the image style settings, which include margins, a border and CSS class, in the More options section. You can see this feature in the Custom CSS demo.
