The DevExpress MVC HTML Editor provides Custom CSS options that allow you to deliver custom formats as defined by custom CSS classes - exposed to end-users and applied to the content selected within the editor. By using the Custom CSS feature of the DevExpress MVC HTML Editor, logical elements (such as titles, headers, text blocks, etc) can be formatted using individual formatting styles, defined by names of the associated CSS class and HTML tag.
In this demo, custom styles are defined for content text elements such as article title, headers, the main content text and image titles. To apply any of the predefined styles to the text selected within the Design View, choose the desired style item within the "Apply CSS" bar item.
The standard toolbar's "Apply CSS" dropdown editor (ToolbarCustomCssEdit type) allows you to list available custom CSS styles and make them available to end-users.
When the SettingsDialogFormElements.InsertImageDialog.ShowStyleSettingsSection property is set to true, the HTML Editor allows end-users to specify the CSS class for an image using the image dialog. To apply a style to an image, invoke the image dialog by double-clicking the image, by right-clicking the image and selecting Change Image... in the context menu, or by selecting the image and clicking the Insert Image button in the toolbar. In the invoked Change Image dialog, select the More options check box. Use the CSS class combo box on the right to select the CSS class for the current image. The CSS styles listed in the combo box can be specified using the editor's SettingsForms.InsertImageCssClassItems property.
Local Copy of this Demo To inspect the source code for this demo on your machine, you must first install our components via the DevExpress Component Installer. |
You can open a local copy of this online demo directly from this webpage (if using v20.2.8, 21.1.4 or higher).
\Users\Public\Documents\DevExpress Demos XX.X\Components\ASP.NET\CS\MVCxHTMLEditorDemos |