Specify an image for the ordered and unordered lists

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:

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:

<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

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

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

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