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.v24.1.dll

NuGet Package: DevExpress.Web

Declaration

C#

public class ToolbarCustomCssEdit :
    ToolbarComboBoxBase

VB.NET

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.

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.

C#

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);
}

ASPX

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<dx:ASPxHtmlEditor ID="ASPxHtmlEditor1" runat="server">
    <Toolbars>
        <dx:HtmlEditorToolbar Name="StandardToolbar2">
            <Items>
                <dx:ToolbarCustomCssEdit Width="120px">
                    <Items>
                        <dx:ToolbarCustomCssListEditItem TagName="" 
                            Text="Clear Style" CssClass=""/>
                        <dx:ToolbarCustomCssListEditItem TagName="H3" 
                            Text="Header1" CssClass="CommonHeader1">
                            <PreviewStyle CssClass="CommonHeader1Preview"/>
                        </dx:ToolbarCustomCssListEditItem>
                        <dx:ToolbarCustomCssListEditItem TagName="Strong" 
                            Text="Features" CssClass="CommonFeatures">
                            <PreviewStyle CssClass="CommonFeaturesPreview"/>
                        </dx:ToolbarCustomCssListEditItem>
                        <dx:ToolbarCustomCssListEditItem TagName="" 
                             Text="Link" CssClass="Link">
                            <PreviewStyle CssClass="LinkPreview"/>
                        </dx:ToolbarCustomCssListEditItem>
                    </Items>
                </dx:ToolbarCustomCssEdit>
            </Items>
        </dx:HtmlEditorToolbar>
    </Toolbars>
    <CssFiles>
        <dx:HtmlEditorCssFile FilePath="~/Features/Css/Custom.css"></dx:HtmlEditorCssFile>
    </CssFiles>

</dx:ASPxHtmlEditor>

Note

You should register preview styles (PreviewStyle.CssClass) on the same page that contains the HTML Editor.

Implements

IStateManager

IPropertiesOwner

IExpressionsAccessor

Inheritance

Object

StateManager

CollectionItem

ToolbarItemBase

HtmlEditorToolbarItem

ToolbarDropDownBase

ToolbarComboBoxBase

ToolbarCustomCssEdit