When a list item is set with a color or background color, only the text gets modified. A more appropriate user experience would be if the whole list item get affected by the chosen value. The following custom Inline Command modification changes the behavior of the ForeColor command and provides more desktop-like text editing experience to the users. <telerik:RadEditor ID="RadEditor1" runat="server"> <Content> <ol> <li>list item</li> <li>list item</li> <li>list item</li> </ol> </Content> </telerik:RadEditor> <script type="text/javascript"> (function ($, $E, utils) { $E.ForeColor = function (editor, commandSettings, options) { $E.ForeColor.initializeBase(this, [editor, commandSettings, options]); }; $E.ForeColor.prototype = { formatFragment: function (fragment) { var formatNode; var parent = fragment.getParent(); var parentFormatted = this.findSameFormattedAncestor(parent); if (parentFormatted && this.hasSameFormattingValue(parentFormatted)) { return; } if (this.shouldFormatParentNode(fragment)) { this.formatNode(parentFormatted || parent, true); } else { for (var i = 0; i < fragment.nodes.length; i++) { var node = fragment.nodes[i]; if (this.isMarker(node) || this.hasSameFormatting(node)) { continue; } if (utils.isTag(node, 'font')) { this.formatFont(node); } else { var nodeName = this.settings.tag || "SPAN"; if (node.nodeName == nodeName && !node.parentNode.style[this.settings.cssName]) { this.formatNode(node); } else if ((node.parentNode.nodeName == nodeName || node.parentNode.nodeName === "LI") && this.getNodesTextContent([node]) == this.getNodesTextContent([node.parentNode])) { this.formatNode(node.parentNode); } else { formatNode = this.createInlineNode(); fragment.insertBeforeFirst(formatNode); fragment.appendTo(formatNode); } } } } } }; $E.ForeColor.registerClass("Telerik.Web.UI.Editor.ForeColor", $E.InlineCommandWithValue); })($telerik.$, Telerik.Web.UI.Editor, Telerik.Web.UI.Editor.Utils); </script>