Specify an image for the ordered and unordered lists

Updated over 1 year ago

Environment

Product Version	2019.3.1023
Product	RadEditor for ASP.NET AJAX

Description

The article explains how to configure the bullet and numbered lists to use a custom image for the marker.

Solution

The solution is to define a bullet list with an image via the list-style-image CSS property:

CSS

ul {
       list-style-image: url('sqpurple.gif');
}

You can see how to import this style in RadEditor in this live demo: Editor - Customize Content Area, e.g.

###For ContentAreaMode="Div" you can make it like this:

ASP.NET

<style>
    .reContentArea ol, .reContentArea ul 
    {
        list-style-image: url(https://via.placeholder.com/16);
    }
</style>
<telerik:RadEditor runat="server" ContentAreaMode="Div"></telerik:RadEditor>

###For ContentAreaMode="iframe" create a CSS file with contents:

EditorContentAreaStyles.css

CSS

    ol, ul {
        list-style-image: url(https://via.placeholder.com/16);
    }

and import it in the content area with the ContentAreaCssFile or CssFiles property:

ASP.NET

<telerik:RadEditor 
    ContentAreaCssFile="~/EditorContentAreaStyles.css"
    id="RadEditor1" 
    runat="server">
</telerik:RadEditor>