New to Telerik UI for ASP.NET AJAX? Start a free 30-day trial
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:
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>