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

ToolbarCustomCssEdit Class

A default toolbar editor that can contain a list of custom CSS styles, and allows a particular style to be applied to the text content selected in the design view area.

Namespace: DevExpress.Web.ASPxHtmlEditor

Assembly: DevExpress.Web.ASPxHtmlEditor.v19.2.dll

Declaration

public class ToolbarCustomCssEdit :
    ToolbarComboBoxBase
Public Class ToolbarCustomCssEdit
    Inherits ToolbarComboBoxBase

Remarks

The ASPxHtmlEditor control provides the Custom CSS feature, that enables end-user custom formatting, defined by custom css classes, to be exposed to end-users and applied to the content selected within the editor. Within the editor's toolbars this feature is implemented by the Apply CSS button. Clicking this button opens a drop down window with custom, predefined paragraph styles.

ASPxHtmlEditor-Concepts-WorkWithContent-CustomCSSDropDown

In order to specify css files that contain definitions of custom css classes, the ASPxHtmlEditor.CssFiles property of the ASPxHtmlEditor can be used. The editor's items can be manipulated via the editor's HtmlEditorToolbar.Items property. The display text of an editor item can be defined using the item's ToolbarCustomCssEdit.Text property. An item's ToolbarCustomCssListEditItem.CssClass and ToolbarCustomCssListEditItem.TagName properties are used to associate the item with the corresponding css class name, which defines a specific formatting, and specify the name of a tag to wrap the text content to which the associated style will be applied.

You can add the Apply CSS button to toolbars by using either the ASPxHtmlEditor designer at design time, or programmatically.

protected void Page_Load(object sender, EventArgs e) {
    ASPxHtmlEditor1.CssFiles.Add("~/Features/Css/Custom.css");
    HtmlEditorToolbar stToolbar1 = HtmlEditorToolbar.CreateStandardToolbar2();
    ToolbarCustomCssEdit cssButton = new ToolbarCustomCssEdit();
    ToolbarCustomCssListEditItem item1 = new ToolbarCustomCssListEditItem();
        item1.TagName = "";
        item1.Text = "Clear Style";
        item1.CssClass = "";
    ToolbarCustomCssListEditItem item2 = new ToolbarCustomCssListEditItem();
        item2.TagName = "H3";
        item2.Text = "Header";
        item2.CssClass = "CommonHeader";
        item2.PreviewStyle.CssClass = "CommonHeaderPreview";
    ToolbarCustomCssListEditItem item3 = new ToolbarCustomCssListEditItem();
        item3.TagName = "Strong";
        item3.Text = "Features";
        item3.CssClass = "CommonFeatures";
        item3.PreviewStyle.CssClass = "CommonFeaturesPreview";
    ToolbarCustomCssListEditItem item4 = new ToolbarCustomCssListEditItem();
        item4.TagName = "";
        item4.Text = "Link";
        item4.CssClass = "Link";
        item3.PreviewStyle.CssClass = "LinkPreview";
    cssButton.Items.Add(item1);
    cssButton.Items.Add(item2);
    cssButton.Items.Add(item3);
    cssButton.Items.Add(item4);
    stToolbar1.Items.Add(cssButton);
    ASPxHtmlEditor1.Toolbars.Add(stToolbar1);
}
See Also