HTML Editor - Toolbar Items Custom CSS

  • Cut (Ctrl+X)
  • Copy (Ctrl+C)
  • Paste (Ctrl+V)
  • Paste from Word
  • Undo (Ctrl+Z)
  • Redo (Ctrl+Y)
  • Remove Format
  • Superscript
  • Subscript
  • Ordered List
  • Bullet List
  • Indent
  • Outdent
  • Insert Link (Ctrl+K)
  • Remove Link (Ctrl+Shift+K)
  • Insert Image (Ctrl+G)
  • Insert Table
  • Find and Replace (Ctrl+H)
  • Full Screen (F11)
  • v
  • v
  • v
  • Bold (Ctrl+B)
  • Italic (Ctrl+I)
  • Underline
  • Strikethrough
  • Align Left (Ctrl+L)
  • Align Center (Ctrl+E)
  • Align Right (Ctrl+R)
  • Back Color
  • Fore Color

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.

Version: v2017 vol 1.7
Copyright © 2006-2017 Developer Express Inc
Your Next Great MVC App Starts Here

Get started today and download your 30-day trial of DevExpress MVC Extensions (includes 30 days of free technical support).

All demos ship with full source code and are included in the DevExpress MVC distribution. Refer to the Demos and Sample Applications topic to learn more.

DevExpress MVC Extensions ship as part of DevExpress Universal, DXperience and ASP.NET Subscriptions and are backed by a 60 day unconditional money-back guarantee.
To learn more and obtain pricing information, visit the Compare Features and Pricing webpage. For immediate assistance, contact us by Email at or by phone at +1 (818) 844-3383 between 7:30am and 4:30pm Pacific Time.