ToolbarCustomCssListEditItem.CssClass Property
Gets or sets the name of the cascading style sheet (CSS) class associated with the current list item.
Namespace: DevExpress.Web.ASPxHtmlEditor
Assembly: DevExpress.Web.ASPxHtmlEditor.v24.2.dll
Declaration
Property Value
| Type | Description |
|---|---|
| String | A string value specifying the name of the associated cascading style sheet class. |
Remarks
A list item’s 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 an HTML tag to wrap the text content to which the associated style will be applied.
Example
This example demonstrates how to programmatically create the standard toolbar item of the ToolbarCustomCssEdit type, and add the CSS file to the web project.
In order to specify a css file that contains definitions of custom css classes, the ASPxHtmlEditor.CssFiles property of the ASPxHtmlEditor can be used. The display text of an editor item can be defined using the item’s ListEditItem.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. The preview style of the item displayed within the drop down list of the ToolbarCustomCssEdit object is defined by using the ToolbarCustomCssListEditItem.PreviewStyle property.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register assembly="DevExpress.Web.ASPxHtmlEditor.v10.2, Version=10.2.1.0, Culture=neutral,
PublicKeyToken=b88d1754d700e49a" namespace="DevExpress.Web.ASPxHtmlEditor" tagprefix="dxhe" %>
<%@ Register assembly="DevExpress.Web.v10.2, Version=10.2.1.0, Culture=neutral,
PublicKeyToken=b88d1754d700e49a" namespace="DevExpress.Web.ASPxEditors" tagprefix="dxe" %>
<%@ Register assembly="DevExpress.Web.ASPxSpellChecker.v10.2, Version=10.2.1.0, Culture=neutral,
PublicKeyToken=b88d1754d700e49a" namespace="DevExpress.Web.ASPxSpellChecker" tagprefix="dxwsc" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
protected void Page_Load(object sender, EventArgs e) {
HtmlEditorCssFile myCss = new HtmlEditorCssFile();
myCss.FilePath = "~/Css/Custom.css";
ASPxHtmlEditor1.CssFiles.Add(myCss);
CustomToolbar myToolbar = new CustomToolbar();
ToolbarCustomCssEdit myToolbarButton1 = new ToolbarCustomCssEdit();
ToolbarCustomCssListEditItem CustomStyle1 = new ToolbarCustomCssListEditItem();
ToolbarCustomCssListEditItem CustomStyle2 = new ToolbarCustomCssListEditItem();
CustomStyle1.Text = "Header1";
CustomStyle1.CssClass = "CommonHeader1";
CustomStyle1.TagName = "h1";
CustomStyle2.Text = "Header2";
CustomStyle2.CssClass = "CommonHeader2";
CustomStyle2.TagName = "h2";
CustomStyle1.PreviewStyle.CssClass = "CommonHeader1";
CustomStyle2.PreviewStyle.CssClass = "CommonHeader2";
myToolbarButton1.Items.Add(CustomStyle1);
myToolbarButton1.Items.Add(CustomStyle2);
myToolbar.Items.Add(myToolbarButton1);
ASPxHtmlEditor1.Toolbars.Add(myToolbar);
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<dxhe:ASPxHtmlEditor ID="ASPxHtmlEditor1" runat="server">
</dxhe:ASPxHtmlEditor>
</div>
</form>
</body>
</html>