Customizing style dropdown

The CSS Style Dropdown functionality in Rich Text Editor 8 has been significant improved. You can create a cascading style sheet file in which to define all the styles you need when editing content, and then use the file within the editor. Its content (styles) will be displayed in the Style drop-down menu. Unlike the previous version, both styles and classes are rendered in the drop-down menu as they will look in page so that you can easily pick the correct one.

You can create your own style list programmatically or by editing the static configuration file: richtexteditor\config\staticstyles.xml.

Online demo:

Dynamically populate the dropdown menu

The source code of this example can be found in the download package.

How to disable style dropdown?

RichTextEditor allows you disable individual toolbar icons using Editor.DisabledItems property. If you want to disable the style Dropdown, you can add "styles" into Editor.DisabledItems list.


<RTE:Editor runat="server" ID="Editor1" DisabledItems="styles" />

Edit the staticstyles.xml file

The staticstyles.xml file can be found in the richtexteditor/config folder. In staticstyles.xml file you can find the following code which defines the font sizes information within RichTextEditor.

Here is the default style setting:

<style name="@clearstyle" />
<style name="Comment" italic="1" cssstyle="color:darkgreen;" />
<style name="Highlight" cssstyle="background-color:yellow;" />
<style name="cssclass1" cssclass="cssclass1" />
<style name="cssclass2" cssclass="cssclass2" />

Auto parse CSS classes from Editor.ContentCss property

When Editor.AutoParseClasses Property is true, RichTextEditor will automatically parse the CSS classes from ContentCss and populate all items into CssClass dropdown.


<RTE:Editor runat="server" ID="Editor1" ContentCss="example.css" />

Prevent CSS classes from populating the style drop down menu.

In some situations, you may need to prevent some css class items from populating the style drop down menu. To achieve this you can use Editor.DisableClassList Property. The class items in the style dropdown needed to be disabled going to this string.


<RTE:Editor runat="server" ID="Editor1" ContentCss="example.css" DisableClassList="BreadCrumb, TopicMenu, Footer" />

Send feedback about this topic to CuteSoft. © 2003 - 2018 CuteSoft Components Inc. All rights reserved.